VueRouter全局路由守卫

最新推荐文章于 2025-08-14 15:00:00 发布

原创最新推荐文章于 2025-08-14 15:00:00 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

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

// 挂载路由导航守卫 全局路由守卫
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();
})