关于vue3: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')
    }
  })
}

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

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