VUE导航守卫（前置守卫） （全局守卫）

在VUE官方文档中有写到  ‘导航”表示路由正在发生改变’，正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

每个守卫方法接收三个参数：

to:即将要进入的目标路由对象

from: 当前导航正要离开的路由

next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

听起来可能有点绕，让我们用一个登陆并判断用户登陆状态的例子来解释吧；

现在假设我们用VUE搭建了一个单页面服务， 现在里面有两个路由，一个是login，另一个是manage。

首先要明确的是如果我们想对后台数据进行操作的话，必须处于登陆状态，不然随便来一个匿名用户就把你的库删了，你就只能立刻跑路了。

那么如果来判断用户是否登陆以及登陆状态这时我们就要用到token了，

用户登陆成功后，后台会在响应体中返回token，我们将token存储在本地；那么我们就可以根据token是否存在来判断用户是否已经登陆过（无需判断token是否有效，只要有就说明登陆过，是否过期交由后台判断），我们所需要做的就是只要路由发生改变并且目标不是登陆路由的时候，我们就要去判断这个用户有没有登陆过，如果没有就跳转到登陆页让他去登陆，否则说明他登陆过，那么我们就可以让他正常访问；

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
const tokensign = window.sessionStorage.getItm('token')
//to.path 目标路由
//next 必须有否则程序不会继续执行
if(to.path !== '/login' && !tokensign) { return next('/login') }
    next()
})    

这样只要用户本地获取不到token就说明他不是登陆状态就会跳转到/login路由。