vue 声明周期函数_vue-router路由守卫-上

1. 为什么要使用路由守卫？什么是路由守卫？

第一次认识路由守卫：之前我做过的小项目里面，我们直接在浏览器网址的地方进行修改就能跳转页面，这是不安全的，因此就需要路由守卫，实现通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，避免非法登录。

路由守卫的概念：路由守卫也叫导航首位，路由拦截。

官方的解释是：

正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

其实我们可以理解为：路由守卫就是路由跳转过程中的一些钩子函数，是一个大的过程，这个过程分为：跳转前，中，后等等细小的过程，在每一个过程中都有一函数，这个函数能让你进行一些操作，这就是导航守卫。

2. 路由守卫分类

路由守卫分为三类：

1.全局导航守卫

1.全局前置守卫，路由跳转之前执行：router.beforeEach(to，from，next)
2.全局解析守卫：router.beforeResolve
3.全局后置守卫，路由跳转之后执行：router.afterEach((to,from){ 条件代码 }）

2.路由独享守卫：

beforeEnter:(to,from,next){  条件代码 }

3.组件内守卫

1.组件内的前置守卫： beforeRouteEnter((to,from,next)=>{})
2.组件内的后置守卫： beforeRouteLeave (to,from,next){ 条件代码 }
3.组件内的更新守卫：beforeRouteUpdate ( to,from,next ){}

3.使用

全局导航守卫-全局前置守卫（常用）：router.beforeEach(to，from，next)

router.beforeEach((to,from,next)=>{console.log(to);  // 即将要跳转的路由console.log(from); // 即将要离开的路由next() // 一定要调用 ，执行之后的效果依赖next内带的参数
})

路由发生变化就会调用beforeEach函数。其中参数to指向下一个路由（即将跳到的路由），from指向下一个路由（跳转之前的原页面），next为一个方法，并且一定要调用

next需要注意的地方：

但凡涉及到有next参数的钩子，必须调用next() 才能继续往下执行下一个钩子，否则路由跳转会停止。
next(false)。中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。主要用于登录验证不通过的处理
next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可以向next中传递任意位置的对象。
next(error): (v2.4.0+) ：如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。

4.token

前面了解了路由导航基本使用，那么我们需要判断用户权限，判断是否为非法登录，怎么判断呢？这个时候我们就要用到token令牌了。

token运行模式

token是怎么来的呢？在用户登录完成之后，后台会返回一个token值给我们，我们把它存储到cookie中，然后使用cookie.get就能取到想要的东西，关于如何存储以及使用，后面一篇再记录。

所以上面的整个流程我们可以用代码实现

//记得导入cookie
import cookie from "cookie-js"
//定义gettoken方法获取token
function getToken(){return cookie.get("token")
}

路由守卫部分，添加判断语句

router.beforeEach((to,from,next)=>{//如果调用getToken()方法得到了token，则输出存在，由于我们还没存储token，所以不会进入这个语句中
//在这里，我们可以进行路由的动态添加，分配菜单等等，下一篇再学习
//先重点看不存在的情况下的处理方法if(getToken()){console.log("存在token")}
//如果调用getToken()方法没有得到token，则输出不存在else{console.log("不存在token！！")}next()
})

不存在token的时候，我们跳转到登录界面，直接在else语句中添加next("/login")就可以吗？

答案是不可以。这个会造成一个死循环。我们来分析一下：

通过判断，我们得到没有token的结论，因此调用else中的语句next("/login")，此时路由跳转到登录界面login，可是由于next中带了参数，会再次触发beforeEach钩子函数，再次进行判断。。第二次判断，我们仍然没有token，仍然进入else语句中，仍然执行next("/login")，再次触发beforeEach。。就将会进入一个死循环。

为了，避免死循环，这个时候我们就需要用到白名单来进行相关处理

//声明一个白名单
const whiteRouter = ['/login'];

补充一个indexof方法，判断数组中是否存在指定的某个对象，如果不存在，则返回 -1

在上面的else语句中，添加一个判断

//当to.path == '/login' 的时候，存在
if (whiteRouter.indexOf(to.path) !== -1) {  next(); //执行next()，指向to.path，而且由于没有参数，不会再次触发beforeEach}
//不存在时
else{//发生路由指向变化，触发beforeEach，重新判断，此时to.path == '/login'，在下一次判断中，在白名单中存在next('/login');}