全局、独享、局部路由守卫

一、创建路由

//创建一个路由器,并暴露
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },

    ]
})

二、全局路由守卫

       全局守卫都是设置在 router 上面的，这个可以在 router/index.js 里面找到。可以在这里设置全局守卫，当然也可以在其他地方设置全局守卫，比如 main.js 或者 App.vue。这个看具体的需要了。

路由守卫：保护路由的安全。（权限）

（1）全局前置路由守卫

每次路由切换前/初始化的时候-被调用

全局前置守卫beforeEach全局守卫的回调函数接受三个参数为：to，from，next

三个参数说明：

• to跳转进入的目标路由对象
•  from当前准备离开的路由对象
•  next调用该方法后，进入下一个钩子函数，作用类似于express或者koa中中间件里调用的next

 next函数说明：

• 如果next函数正常调用next()表示正常进入跳转路由，导航状态为确认
•  如果next函数在调用是传入false，如：next(false)，表示终端导航跳转
•  next函数还可以传参，表示跳转到指令路由next("/")，或next({ path:"/" })参数的路由

router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from);

    if (to.meta.isAuth) { //是否需要鉴权
        if (localStorage.getItem('school') === 'atguigu') {
            next() //放行
        } else {
            alert('学校名不对，无权限！')
        }
    } else {
        next()
    }
});

（2）全局后置路由守卫

afterEach全局路由守卫

afterEach全局守卫的回调函数接受两个参数为 to，from

两个参数说明：

• to跳转进入的目标路由对象
• from当前准备离开的路由对象

afterEach没有next()回调函数，因为在afterEach被调用时，路由已经跳转完毕。

router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from);
    document.title = to.meta.title || '硅谷系统'
});

三、独享路由守卫

      使用的钩子函数与全局路由守卫一致，为beforeEnter，不同的是，路由独享守卫是定义在路由记录中，全局路由守卫是定义在入口文件中，路由独享守卫只在路由进入时有效，全局路由守卫是所有路由跳转都会被拦截。

      指单个路由配置的时候也可以设置的钩子函数。

 //是否授权
 meta: { isAuth: true, title: '新闻' },
 //独享路由守卫
 beforeEnter: (to, from, next) => {
    // ...
    console.log('独享路由守卫', to, from);
    if (to.meta.isAuth) { //是否需要鉴权
    if (localStorage.getItem('school') === 'atguigu') {
         next() //放行
    } else {
         alert('学校名不对，无权限！')
         }
    } else {
         next()
    }
}

四、组内路由守卫

1.  组件内的守卫是定义在组件内部，组件选项对象中的路由守卫

2.  组件内部路由守卫有三个，为：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave。

3.  beforeRouteEnter组件创建前调用，不能使用组件实例this

4.  beforeRouteUpdate路由被改变，但是组件被复用时调用，比如：动态路由

5.  beforeRouteLeave导航离开时该组件调用 

export default {
    name:'About',
    //通过路由规则，进入该组件被调用
    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()
    }
}