Vue 路由守卫死循环？

今天主要把那个 Vue 后台的 Token 过期后无法跳回登录的问题给完善了，对路由守卫进行优化，通过后端输出过期时间，在前台切换页面的时候进行检测就可以了。

router.beforeEach((to, from, next) => {
  if(to.meta.title) {
    document.title = to.meta.title + " - 管理后台";
  }

  if(to.name !== "Login" && !isLogin()){
    console.error("未登录");
    next("/login");
  }
  else{
    next();
  }
});

而我之前的写法和文档不同，就出现了死循环。为什么呢？

if(to.name === "Login" && isLogin){
    // 当时我只知道 next 是不会跳转的
    // 在 Login 页面确实不应该跳转
    // 因为是没登录才跳，所以就用了“已登录”作为判断条件了
    next();
}
else{
    next("/login");
}

// 再之前的，没有登录，指向 Login 就允许跳转？
if(!sessionStorage.getItem("sign")) {
  if(to.path == "/login") {
    next();
  }
  // 不是 Login 怎么处理？直接就不显示了！
}
// 结果最后加了这个“才能用”
next();

假设我们访问的地址是“Booking”，那么第一个条件肯定无法通过，指向“Login”。但是即便跳过去了，但仍然是“未登录”状态，于是就会出现循环跳转“Login”的情况了... 而再之前的写法就毫无疑问了，完全错误，当时自己估计写的都晕了 😷

是不是感觉我明明很菜，却还想逞强不看文档？😭 确实如此。我认为现在的前端技术确实变迁的太快，库只会越来越多，你也不可能全部都能学会。万一一个库不更新了，遇到 Bug 修不成，重做又是个大工程！所以还是得会最基础最原始的技术，也正是这样，我自己的项目才会一直坚持着自己写组件...

晚上和老王开吃鸡的时候，他的运气意外的强。在皮卡多的大仓出现了三台饮料机，而他却接连不断的狂出 8 瓶饮料，以至于他的背包已经装下了高达 60+ 的惊人数量...

2020-09-02