导航守卫的使用记录和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')
    }
  }
});
相关推荐
掘金安东尼15 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~18 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务20 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛20 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑24 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭30 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿35 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨44 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js