vue路由权限验证之路由守卫

vue登陆验证之导航守卫

在网站中我们需要判断用户是否登陆来决定用户是否有权限访问网站的页面.

一般会在登陆成功后,将后台Response的token存储在localhost或者vuex中.

当路由发生变化时去校验这个token是否存在.决定是否能跳转

在响应成功后存储token值

localStorage.setItem("token", res.data.data.token);

main.js添加全局导航守卫

const router = new VueRouter({...});
router.beforeEach((to, from, next) => {
   //to 要进入的目标路由
  if (to.path === "/login") {
      // next 继续执行
    next();
  } else {
      //获取token
    let token = localStorage.getItem("token");
    if (token === null || token === "") {
      next("/login");
    } else {
      next();
    }
  }
});
export default router;