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

前置导航守卫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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

在进行拦截之前要在登录成功后把用户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;  
        }  
      });  
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

router.beforeEach((to, from, next) => {
  if (localStorage.getItem('token') === null) {
    console.log('出现死循环了');
    // 重定向到登录页面去
    next({
      path: '/login'
    });
  } else {
    next();
  }
});
1
2
3
4
5
6
7
8
9
10
11

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')
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11