VueRouter全局路由守卫

RightHereWaitingFY

于 2020-05-07 16:19:40 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/105975189

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了在前端开发中如何使用全局路由守卫来实现页面的权限验证，通过判断用户是否已登录（检查token）来决定是否允许访问特定页面。

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

// 挂载路由导航守卫 全局路由守卫
router.beforeEach((to,from,next) => {
  // to 将要访问的路径 
  // from 代表从哪个路径跳转而来的
  // next 是一个函数 表示放行  next()直接放行  next('/login')强制跳转
  
  // 如果将要访问的页面是/login，则直接放行
  if(to.path === '/login') return next();
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token');
  // 如果tokenStr不存在，则跳转到登录页
  if(!tokenStr) return next('/login');
  // 如果tokenStr存在，则直接放行
  next();
})