vue中全局前置守卫beforeEach使用

最新推荐文章于 2025-04-07 09:44:37 发布

皮卡砖

最新推荐文章于 2025-04-07 09:44:37 发布

阅读量3.5k

点赞数 4

分类专栏：笔记文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_52137798/article/details/117134840

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

该博客介绍了如何在Vue.js的路由配置中使用`beforeEach`全局前置钩子进行用户登录验证。通过获取本地存储的token，并进行二次验证，确保用户访问受保护的页面时已登录。当用户尝试访问需要登录的页面时，若未登录或token无效，系统会将其重定向到登录页面；反之，合法用户则能正常浏览。同时，如果已登录用户试图访问登录页面，系统会将其引导至首页。

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

router.beforeEach((to, from, next) => {
  // to 将要跳转到的路由,
  // from 从哪个路由跳转过来的,
  //next() 不调用此函数将无法正常跳转
})

beforeEach全局前置钩子相当于最外层的保安,来为我们做用户登陆验证保驾护航

router下index.js文件

router.beforeEach(async (to, from, next) => {
 
  const token = localStorage.getItem('token') // 拿到保存在浏览器后端发送来的token **令牌 (通行证)**
  const flag = !!token  // 将token隐试的转换成Boolean值
  const data = await userInfo()  // 这是与后端定义好的 对用户的二次验证 诺返回error === 400 表示你造假登陆
  		// 判断你需要去的路由是否需要登陆验证
  if (to.matched.some((item) => { return item.meta.login })) { 
    if (flag) {
      //

      if (data.error === 400) {
        next('/login') //不合法,重新登陆 并且 强制跳转到登陆注册页面
        return;
      }
      // 到了这里肯定是合法了 不然会被 上边if return 结束下面代码的继续执行
      if (to.name == 'login') {
      	// 如果你合法登陆了但还要去登陆页注册页面 那强制让他去首页
        next('/home')
      } else {
      // 只要你不去 登陆 注册页面想去哪去哪
        next()
      }
      return
    }

    if (!flag && to.name === 'login') {
    // 如果你没token 想去 登陆注册 那可以去吧
      next()
      return
    }
    if (!flag && to.name !== 'login') {
    // 你没登陆还不去注册还想去只能登陆才能看的页面 那想的美强制跳到根页
      next('/')
    }
  } else {
  // 只要你不去需要登陆才能去的页面 想去哪去哪
    next()
    return
  }