vue中全局前置守卫router.beforeEach出现死循环日记

今天我用vue写登录的时候，想利用全局前置守卫来进行路由控制,判断是否登录和是否有此资源写完后会发现页面空白,并进入死循环。

设置路由

 1 const routes = [
 2   {
 3     path: '/',
 4     redirect: "/login" // 重定向
 5   },
 6   {
 7     path: '/home',
 8     component: Home,
 9     children: [ // 子路由
10       {
11         path: '',
12         name: 'home',
13         component: Dash,
14         meta: {
15           auth: true
16         }
17       },
18       {
19         path: 'about',
20         name: 'About',
21         component: () => import('../views/About.vue'),
22         meta: {
23           auth: true
24         }
25       },
26       {
27         path: 'list',
28         name: 'list',
29         component: () => import('../views/List.vue'),
30         meta: {
31           auth: true
32         }
33       },
34       {
35         // path: 'detail',
36         path: 'detail/:id', // id代表动态路由，值是不固定的
37         name: 'detail',
38         component: () => import('../views/Detail.vue'),
39         meta: {
40           auth: true
41         }
42       }
43     ] 
44   },
45   {
46     path: '/login',
47     name: 'login',
48     component: () => import('../views/Login.vue'),
49     meta: {
50       auth: true
51     }
52   }, 
53   {
54     path: "*", // 匹配所有路由
55     name: "404",
56     component: () => import('../views/NotFound.vue')
57   }
58 ]

错误代码

// 注册全局前置守卫
// 在访问路由之前进行拦截
router.beforeEach((to, from, next) => {
  // 获取 token, 登录的标识
  var token = sessionStorage.getItem("token");
  if(to.meta.auth) { // 判断是否有这个路径
    if(token) { // 再次判断是否已经登录过
      next()
    } else {
      next({ // 没有登录过，导向登录页
        path: '/login',
        query: {redirect: to.fullPath} // 记录原本想访问的路径
      })
    }
  } else {
    next(); 
  }

正确代码

 1 // 注册全局前置守卫
 2 // 在访问路由之前进行拦截
 3 router.beforeEach((to, from, next) => {
 4   // 获取 token, 登录的标识
 5   var token = sessionStorage.getItem("token");
 6   
 7   if(token) { // 判断是否已经登录过
 8     next()
 9   } else { 
10     if(to.meta.auth && to.path ==='/login') { // 如果有此资源且是登录页
11       next();
12     } else if(!to.meta.auth){ // 没有此资源，到404页面
13       next()
14     } else { // 有此资源，没有登陆过，也不是登录页
15       next({path: '/login'})
16     }
17   }
18 
19 })

原因：next({path: '/login'}) 会再次调用 router.beforeEach((to, from, next) ,在错误实例中没有出口，导致死循环

来源：https://www.cnblogs.com/feng-fengfeng/p/12284268.html