VUE Redirected when going from “/login“ to “/dashboard“ via a navigation guard. 报错

VUE Redirected when going from “/login” to “/dashboard” via a navigation guard. 报错

（1）分析代码：

登录界面逻辑：handleLogin()是点击登录按钮时触发的方法

  methods: {
    handleLogin() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {
            username: this.form.username,
            flag: "1",
            password: this.form.password
          };
          login(params).then(res => {
            if (res.code == 0 && res.data) {
              sessionStorage.setItem("userName", res.data.username);
              if (res.data.access_token) {
                sessionStorage.setItem("token", res.data.access_token);
              }
              this.$router.replace("/");
            }
          });
        }
      })
    }
  }

导航守卫：

// 页面跳转路由拦截
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = sessionStorage.getItem('token');
    if (!token) {
      next('/login');
    } else {
      next();
    }
  }
});

（2）逻辑分析：

如果用户输入的登录信息正确后，点击登录按钮，此时进行跳转拦截，拿到token，进入主页面；

如果用户未输入信息点击登录按钮，此时handleLogin()方法会执行跳转到主页面，这个过程中进行跳转拦截，没有拿到token，执行 next(‘/login’)，此时从/login页面导航到/dashboard（主页面’/'）页面时，导航守卫重定向到了/login页面，导致了一个无限循环的重定向。

错误原因：在 Vue 的路由中使用了导航守卫（navigation guard），在从 “/login” 页面跳转到 “/dashboard” 页面时被重定向

（3）解决办法：在导航守卫中，拿到token后进行一个判断，判断用户是否已通过身份验证

修改导航守卫代码：

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = sessionStorage.getItem('token');
    if (!token) {
      next('/login');
    } else {
      if (to.path !== from.path) { // 添加判断条件，只有当目标路径不等于当前路径时才进行重定向
        next();
      } else {
        next(false); // 目标路径和当前路径相同，取消导航
      }
    }
  }
});

不知道逻辑分析的是否正确，希望大佬们多多指正！