vue路由守卫、router.beforeEach()

最新推荐文章于 2024-12-13 14:00:57 发布

乾卦三爻

最新推荐文章于 2024-12-13 14:00:57 发布

阅读量521

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46325225/article/details/123205657

版权

该博客介绍了如何使用Vue.js的路由守卫beforeEach进行用户权限控制。通过判断用户是否已登录，决定是否允许访问特定页面，实现登录拦截功能。当用户尝试访问需要登录才能进入的页面时，若未登录则重定向到登录页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 配置路由守卫  三个可选参数，to去往的目标，from来源的目标对象，next接下来的操作
router.beforeEach( (to,from,next) => {
    // 如果访问的是登录页面，直接放行
    if(to.path == '/login'){
      return next()
    }
    // 如果用户未登录，并且访问的不是登录页面
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    if(!userInfo){
      return next('/login')
    }
    // 如果已经登陆，则直接放行
    next();
})