vue-router 鉴权 守卫

一、怎么理解vue-router
路由导航守卫
又叫路由的钩子函数又叫路由的生命周期函数
就是路由 从开始进入路径到跳转结束这个过程中 到了某个阶段会自动执行的函数

二、实现鉴权的方式分两种：
1、通过vue-router addRoutes 方法注入路由实现控制
通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。
addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！
2、通过vue-router beforeEach 钩子限制路由跳转
通过请求服务端获取当前用户路由配置，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存在于当前路由中，取消跳转，转为跳转错误页。
方法1和2的区别是一个是自动的，一个是手动的。
三、路由守卫
作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。
路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来 next执行下一步

第一种是全局的守卫 守卫所有的页面
写在 router/index.js 里
一共有两个
路由进入之前 router.beforeEach

//全局守卫 守卫所有的页面  只有登录了才能访问所有页面
// router.beforeEach((to,from,next)=>{
//   if(localStorage.getItem('user')){
//     next();
//   }else{
//     if (to.path=='/login') {
//       next();
//     }else{
//       next("/login");
//     }
//   }
// })

//路由离开之后 router.afterEach
//路由离开之后调用，已经离开了 就不需要next了
// router.afterEach((to,from,next)=>{
//   console.log(to,from);
// })
//第二种是组件级守卫 守卫某一个页面
//1、路由进入之前
// beforeRouteEnter (to, from, next) {
//   console.log("路由进入之前");
//   next();
// }
//2、路由更新之前
// beforeUpdate(to, from, next) {
//   console.log('路由更新之前');
//   next();
// },
//路由离开之前
// beforeRouteLeave (to, from, next) {
//   console.log('路由离开之前');
// }
//第三种是单个路由独享的钩子函数
// beforeRouteEnter(to, from, next) {
//   next((vm) => {
//   if (vm.store.state.username == '') {
//   vm.router.push('/');
//   }
//   });
//   },