Vue路由守卫操作-全局路由守卫

先上代码：

router.beforeEach = 全局路由守卫

// 这个东西叫做路由守卫
// 在我们浏览器上面输入了url地址以后跳转到一个组件去
router.beforeEach((to, from, next) => {
  //代表用户访问的是登录页面和注册页面
  // /resetPassWord/[email protected]

  if (to.path == "/" || to.path == "/3" || to.path == "/4" || to.path == "/6") {
    next(); //一定要让用户访问到登录页面
  } else {
    //如果走到这里 代表用户想要访问添加书籍分类页面和查询书籍分类页面
    let status = localStorage.getItem("status");
    if (status === "登录成功") {
      next();
      let i = 600;
      var intervalEnd = setInterval(function () {
        i--;
        console.log(i);
        if (i === 0) {
          clearInterval(intervalEnd);
          localStorage.removeItem("status");
        }
      }, 1000);
    } else {
      //如果昵称为空 就代表用户没有登录 因为只有登录了 才能从
      //sessionStorage里面取到昵称 让你访问/
      next("/");
    }
  }
});

路由解析：

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数，顺利通过，往下走
}

定时器代码：

let i = 600;
      var intervalEnd = setInterval(function () {
        i--;
        console.log(i);
        if (i === 0) {
          clearInterval(intervalEnd);
          localStorage.removeItem("status");
        }
      }, 1000);

定时器设置的目的，是在登录成功后在规定的时间清理localStorage 英/ ˈstɔːrɪdʒ /缓存