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

本文介绍了如何在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()
   }
 }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值