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

前置导航守卫beforeEach的使用

js 复制代码
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中

js 复制代码
    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出现了死循环,导致死循环的代码如下

javascript 复制代码
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( )方法,造成死循环。把它改成下面这种就可以了

javascript 复制代码
router.beforeEach((to, from, next) => {
  if ( localStorage.getItem('Token') ) { // 如果已经登录,就直接放行
    next()
  }else{ // 如果没有登录,需要判断要跳转的页面是否是登录页,如果是就直接放行,如果不是就跳到登录页
    if( to.path == '/login' ) {
      next()
    }else {
      next('/login')
    }
  }
});
相关推荐
pobu16810 分钟前
aksk前端签名实现
java·前端·javascript
烛阴15 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw020 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦33 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo35 分钟前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪00137 分钟前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明42 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang44 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web