导航守卫分类

全局导航守卫

1. 统一登陆身份认证

   统一在 beforEach 判断身份

2. 每次跳转都会触发
   from: 即将离开的路由
   to: 即将跳转到的路由
   next: 函数 next()，是否继续向下执行

3. 单个路由独享导航守卫

4. 组件内导航守卫

 全局前置导航守卫

router.beforeEach()： 前置守卫，初始化的时候被调用、每次路由器切换之前被调用
（这里的router 对应的是 new Router出来的对象）

注意：rou ter.beforeEach()内必须要调用next, 否则路由不会跳转；next()是默认跳到下一个；next( ‘/about’)、 next({ path: ‘/about’})是指定跳转到about

router.beforeEach(to,from,next)=>{
//执行代码
}
//实例
router.beforeEach((to, from, next) => {
// 白名单, 不需要登录认证的路由
let whiteArry = ["/login", "/"];
// 当前路由
if (whiteArry.indexOf(to.path) !== -1) {console.log("白名单, 不需要登录认证的路由");next(); //放行return;
}
// 登录身份认证
// let token = localStorage.getItem("Token");
let token = store.getters.token;
console.log("token ", token);
if (token) {//已经登录next();
}else{next("/login?redirect=1");
}
})

全局后置导航守卫

router.afterEach()： 后置守卫；（这里的router 对应的是 new Router出来的对象）

注意：router.afterEach() 没有 next 参数

//执行代码参照全局前置导航守卫
router.afterEach(to,from,next)=>{
//执行代码
}

2、路由独享守卫  就是某一个路由单独享有的路由守卫
只存在beforeEnter，不存在afterEnter

如果想实现路由组件的to属性添加自定义属性用于权限判断，必须放在meta元数据属性中，meta就是用来存放自定义属性的，比如代码中的to.meta.isAuth，其中isAuth就是用来判断当前路由组件是否用于授权校验。

beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('暂无权限查看！')}}else{next()}},

{path: '/about',name: 'about',meta: {title: '关于'},component: () => import('../views/about.vue')，beforeEnter: (to, from, next) => {console.log('进入about之前调用')next()}},

3、组件内的守卫

在组件内部
//通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对，无权限查看！')}}else{next()}},//通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from)next()}

组件内路由守卫，就是在单个组件内定义些路由守卫的东西。指代进入该组件和离开该组件时使用，强调“进入和离开”的动作，而全局路由守卫才强调“前置和后置”的动作。

全局路由守卫的前置/后置，都会执行，而组件内路由守卫beforeRouteEnter一定会执行，但如果不离开，那么beforeRouteLeave就不会执行。