路由守卫

最新推荐文章于 2024-08-16 18:42:25 发布

飞893

最新推荐文章于 2024-08-16 18:42:25 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/ww137569622/article/details/115997008

版权

这篇博客介绍了如何在Vue.js应用中使用路由守卫进行权限验证。当用户尝试访问受保护的路由时，首先检查是否需要鉴权，然后从sessionStorage获取token。如果未找到token，用户会被重定向到登录页面，并通过query参数携带原本尝试访问的路由，以便登录成功后返回。反之，如果有token，则允许用户通行。

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

路由守卫

router.beforeEach((to,from,next) => {
  console.log('to:', to)
  //第一步：是否需要鉴权
  let flag = to.matched.some(item => item.meta.auth)
  if (flag) {
    //第二步：获取token
    const token = sessionStorage.getItem('token');
    if (!token) {
      return next({
        //要跳转的路由
        path: '/login',
        //通过query携带要传递的参数,query是一个对象
        query: {
          redirect:to.fullPath
        }
     })
    }
    //有token,就直接放行
    next()
  } else {
    next()
  }
})

在组件中：
  let {redirect}=this.$route.query
  this.$router.push({path:redirect})
//路由守卫
router.beforeEach((to,from,next) => {
  console.log('to:', to)
  //第一步：是否需要鉴权
  let flag = to.matched.some(item => item.meta.auth)
  if (flag) {
    //第二步：获取token
    const token = sessionStorage.getItem('token');
    if (!token) {
      return next({
        //要跳转的路由
        path: '/login',
        //通过query携带要传递的参数,query是一个对象
        query: {
          redirect:to.fullPath
        }
     })
    }
    //有token,就直接放行
    next()
  } else {
    next()
  }
})

在组件中：
let {redirect}=this. $r o u t e . q u e r y t h i s .$ router.push({path:redirect})