Vue路由守卫
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。

在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫以及组件内路由守卫

全局路由守卫

全局路由守卫，顾名思义，一旦配置，那么作用范围就是所有的路由，全局路由又分为全局前置守卫和全局后置守卫

全局前置守卫

全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。

//全局前置守卫
router.beforeEach((to,from,next) =>{
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})

全局后置守卫

全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。

//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二级路由组件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'

import DataList from '../pages/DataList'

//创建并暴露一个VueRouter
const router =  new VueRouter({
    routes:[
        //配置路由路径和路由组件
        {
            //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
            name:'导航一',
            path:'/TestA',
            component:TestA,     //要跳转到的组件   
            children:[
                {
                    // 给二级路由起名字
                    name:'DataName',
                    path:'DataList/:introduce',     //起到占位作用
                    component:DataList
                }
            ]
        },
        {
            name:'导航二',
            path:'/TestB',
            component:TestB,
            meta:{isAuth:true,},
            // 配置二级路由
            children:[
                {
                    path:'TestBHzw',     //重点注意，不要加 /
                    component:TestBHzw
                },
                {
                    path:'TestBHyrz',
                    component:TestBHyrz
                }
            ]
        }
    ]
})

//全局前置路由，配合浏览器localStorage进行鉴权操作
router.beforeEach((to, from, next) =>{
    //首先，我们先看一看to和from参数，next就是执行的意思，不写页面是不会跳转的
    // console.log(to, from);
    if(to.meta.isAuth){     //判断是否需要鉴权
        if(localStorage.getItem('name') === '张三'){
            next();
        }else{
            alert('不好意思，姓名不对，没有权限');
        }
    }else{
        next()
    }
})

// 全局后置路由，简单写一个弹窗，在进入每一个路由组件后弹出一句话
router.afterEach(() =>{
    alert('欢迎你！！');
})

export default router;

独享守卫

组件独享守卫是在进入组件时被调用,区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由

beforeEnter(to,from,next){
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

组件内守卫

当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}