今天我用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) ,在错误实例中没有出口,导致死循环