Vue+JavaScript设置路由守卫

在软件开发过程中，当我们不想用户在还未登录的情况下能够进入网站首页，这时我们一般使用路由守卫来实现。

1、什么是路由守卫

路由守卫我们可以简单的理解为一座房子的保安，想要进入到房子内，必须先经过保安（路由守卫）的检查满足要求后才能进入到屋内。你得告诉保安，你从哪里来？要到那里去？然后保安在告诉你下一步要怎么做。如果你是这个房子的主人，则就允许你进入，否则就要打电话给主人，跟房主商量（登录注册），给你权限后才能登录。

2、路由守卫的种类

全局路由守卫（全局前置路由守卫、全局后置路由守卫）、组件内路由守卫、路由独享守卫。

全局前置路由守卫：初始化的时候被调用、每次路由切换之前被调用。

router.beforeEach((to, from,next)=>{
})

to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

全局后置路由守卫：初始化的时候被调用、每次路由切换之后被调用。

router.afterEach((to, from)=>{
})

后置路由相比于前置路由守卫是没next（）。因为都已经切换完页面了，所以就不需要next了。另外两个与前置路由守卫的作用相同。

总之：切换之前都走前置路由守卫，切换之后都是走后置路由守卫。

在这里结合localStorage（本地存储）来实现功能。

// 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  var email = localStorage.getItem("token");
  console.log(to);
  console.log("token");
  if(to.path== "/"){
    next({
      name: "login", // 将跳转的路由path作为参数，登录成功后跳转到该路由
    });
  }
  else if(!email && to.path == "/sign"){
    next()
  }else if (!email && to.path != "/login") {
    //未登录，强制登录
    next({
      name: "login", // 将跳转的路由path作为参数，登录成功后跳转到该路由
    });
  } else {
    next();
  }
});