当前位置：首页 > news >正文

导航守卫的使用记录和beforeEach( )死循环的问题

news 2025/6/28 17:53:34

前置导航守卫beforeEach的使用

import Vue from 'vue'
import VueRouter from 'vue-router'
// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'Vue.use(VueRouter)// 路由表
const routes = [{path: "/",redirect: "/home",},{path: '/home',name: 'Home',component: () => import('../views/Home.vue')},{path: '/login',name: 'Login',component: () => import('../views/Login.vue')},]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})// 前置导航守卫
router.beforeEach((to,from,next) => {// 开启进度条NProgress.start()if ( localStorage.getItem('Token') ) { // 如果已经登录，就直接放行next()}else{ // 如果没有登录，需要判断要跳转的页面是否是登录页，如果是就直接放行，如果不是就跳到登录页if( to.path == '/login' ) {next()}else {next('/login')}}
})export default router

在进行拦截之前要在登录成功后把用户token存储到localStorage中

    login() {  this.$refs.loginForm.validate(async valid => {  if (valid) { let { password,username,key } = this.loginForm;let res = await PassWordlogin({'password': Encrypt(password),//密码（需要使用AES加密）'username': Encrypt(username),//用户名（需要使用AES加密）'key': this.captcha.key,//图形验证码中随机UUID'captcha': key})if( res.code != '200' ) return// 登录成功后存储localStorage，并且跳转路由localStorage.setItem('Token',res.data);this.$router.push('/')} else {  console.log('表单验证失败！');  return false;  }  });  },

当时在做这一部分时遇到一个问题，就是beforeEach出现了死循环，导致死循环的代码如下

router.beforeEach((to, from, next) => {if (localStorage.getItem('token') === null) {console.log('出现死循环了');// 重定向到登录页面去next({path: '/login'});} else {next();}
});

router.beforeEach( )死循环的问题

上面代码会导致页面是空白的，猜测是因为当我们刷新 http://localhost:8080/ 后先会执行 router.beforeEach( ) 该方法，因为我们还没有登录，所以获取到本地存储的token为null，会重定向到 /login 登录页面去，重定向到这个页面就会再次执行beforeEach( )方法，造成死循环。把它改成下面这种就可以了

router.beforeEach((to, from, next) => {if ( localStorage.getItem('Token') ) { // 如果已经登录，就直接放行next()}else{ // 如果没有登录，需要判断要跳转的页面是否是登录页，如果是就直接放行，如果不是就跳到登录页if( to.path == '/login' ) {next()}else {next('/login')}}
});