vue router 导航守卫

最新推荐文章于 2025-10-13 22:54:58 发布

原创最新推荐文章于 2025-10-13 22:54:58 发布 · 399 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用vue-router的导航守卫功能进行用户登录验证，包括全局路由守卫的设置，确保未登录用户无法访问特定页面。

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的

判断用户有没有登录

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const userdata = Cookies.get('userdata')
  if (!userdata) {
    window.location.href = "login.html"
    next(false)
    return;
  }
  const userObj = JSON.parse(userdata)
  if (userObj.uname !== 'admin') {
   window.location.href = "login.html"
   next(false)
    return;
  }
  next()
})