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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据