设置router.js路由拦截的两种方法

设置router.js路由拦截的两种方法

// 挂载路由守卫
router.beforeEach((to, from, next) => {
  // 如果是去登录页 直接放行
  if (to.path === "/login") return next();
  // 如果不是去登录页 就判断是否有token 有就next()放行 没有就强制去登录页next("/login")
  const Token = window.sessionStorage.getItem("token");
  if (!Token) return next("/login");
  next();
});

// 路由拦截（导航守卫：前置导航守卫和后置导航守卫）
// 三个参数
// to代表即将进入的路由
// from代表即将离开的路由
// next（）每一个导航守卫必须搭配一个next（）
router.beforeEach((to, from, next) => {
  // 想要进入购物车页面 必须有token
  let token = localStorage.getItem("token");
  if (to.path == "/cart") {
    // 此时必须要有token
    if (token) {
      next(); // 这个next只针对去往/cart的
    } else {
      Vue.prototype.$toast("请先登录");
      setTimeout(() => {
        next("/user");
      }, 1000);
    }
    return;
  }
  // 下方next是适配所有路由的
  next();
});