Vue登录验证功能

实现一个网页未登录时自动跳转至登录界面？

在地址栏输入url之后，如果当前localStorage中并未存储==token==并且我们要去的网页并不是登录页面，可想而知，应当强制跳转至登录页面。这里就可以利用vue-router的路由守卫来实现。

• 利用beforeEach，当token存在或者要去往的页面是登录页面（我要登录总还是可以的吧~），直接放行；
• 否则，利用next跳转至登录界面（路由为'/login'）

// src/router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (token || to.path === '/login') {
    next()
  } else {
    next('/login')
  }
})

用户名与密码正确后登录又如何跳转至首页（或者其他页面）？

实现了上面的约束之后，我们就可以来实现登录功能了。

当用户名密码正确之后，点击登录，但这时我们还无法跳转至首页，因为上面的路由守卫中还需要token，我们应能从后端获取到token，并将该token存入localStorage中，并利用router.replace('/')来进行路由跳转。

以下是一个小例子：

// 利用element plus的表单功能
const submitForm = (formRef) => {
  formRef.validate((valid) => {
    if (valid) {
      // 如果表单校验成功并且用户名和密码正确，则将token存储起来，并跳转至首页
      if (loginForm.value.username === 'admin' && loginForm.value.password === 'admin') {
        localStorage.setItem('token', 'i have token!')
        router.replace('/')
      }
    } else {
      console.log('error')
    }
  })
}