vue路由守卫

最新推荐文章于 2025-07-02 08:50:38 发布

原创最新推荐文章于 2025-07-02 08:50:38 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

随笔记录专栏收录该内容

11 篇文章

订阅专栏

博客围绕Vue路由守卫展开，路由守卫是Vue前端开发中重要机制，可控制导航的进入、离开等，保障页面访问的合理性与安全性，在前端路由管理方面发挥关键作用。

// 路由守卫 拦截所有路由
router.beforeEach((to, from, next) => {  //to:去哪个页面，from：来自哪个页面，next:放行
  // 获取token
  const token = window.localStorage.getItem('myusertoken')
  // 判断
  if (token) { // 如果有token 直接放行
    next()
  } else {
    // a. 如果去的是登录 直接放行
    if (to.path === '/login') {
      next()
    } else {
      next({
        path: '/login'
      }) //  b. 如果去的是其他页面，直接跳转到登录页面。
    }
  }
})