vue路由守卫(登录态管理)

最新推荐文章于 2024-08-13 04:17:13 发布

兮夏-

最新推荐文章于 2024-08-13 04:17:13 发布

阅读量866

点赞数

本文链接：https://blog.csdn.net/m0_46693606/article/details/115171332

版权

本文介绍了如何在Vue路由中使用meta字段标记需要登录的路径，并详细讲解了如何通过本地存储token实现登录状态管理。还展示了如何在main.js中设置全局路由守卫，确保只有登录用户才能访问特定资源。

摘要由CSDN通过智能技术生成

1,在路由文件需要守卫的path后面加上meta

// 添加该字段，表示进入这个路由是需要登录的
{path: '/home',component: home,meta:{requireAuth:true}}

2,点击登录存储本地token

 // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
 //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
 //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
 window.sessionStorage.setItem('token', res.data.token)

3,在main.js里面加上

// 路由守卫
router.beforeEach((to, from, next) => {
  //获取token
  const tokenStr = window.sessionStorage.getItem('token')
  // 判断该路由是否需要登录权限
  // 数据持久化存储
      if (to.meta.requireAuth) {
        // 判断本地是否存储token
        if (tokenStr) {
          next()
        } else {
          // 没有token
          next({
            path: '/login'
          })
        }
      } else {
        next()
      }
    } else {
      // 登陆成功保存用户信息
      store.commit('USERINFO', {
        userInfo: res.data
      })
      // 放行
      next()
    }
  // /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
  if (to.fullPath === '/login') {
    if (tokenStr) {
      next({
        path: from.fullPath
      })
    } else {
      next()
   }
 }
})