vue路由守卫的基本使用

路由守卫

又叫路由钩子，路由守卫，路由卫士，路由拦截

为什么要有路由守卫？

通俗点就是帮你看门的，你得有凭证才能让你进。
举个栗子：唐僧要去西天取经，每过一个国家，都要被国王呀，守门人啊，各种人问：请问施主你从哪里来，要往何处去？
这时候唐僧再帅他也得告诉人家：贫僧自东土大唐而来,去往西天拜佛求经去的。
当然说这么句话也不好使，说了他得有凭证，那么通关文牒出示了，这个国王阿，守门人才会告诉你下一步该怎么做。
如果你确定让国王看见唐朝皇帝的证明（通关文牒），那么肯定就会让你进入，或者通过这个国家并且好吃好喝的招待你，否则，没凭证的话，肯定要给人家国王汇报，人家国王同意你进我的王国你才能进（注册登录），给你权限。
由此可见啊，这个路由守卫多么重要。

路由守卫分为：全局的, 单个路由独享的, 或者组件级的

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

1.全局守卫

beforeEach:

全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫
将来任何一个路径走到这里来，都会问，我能不能过去 （相当于任何路由都会被拦下来，问一遍）

router.beforeEach((to, from, next) => {
    console.log(to) => // 到哪个页面去？
    console.log(from) => // 从哪个页面来？
    next() => // 一个回调函数
}
router.afterEach（to，from） = {}

router.beforeEach((to, from, next) => {
    //我在这里模仿了一个获取用户信息的方法
  let isLogin = window.sessionStorage.getItem('userInfo');
    if (isLogin) {
        //如果用户信息存在则往下执行。
        next()
    } else {
        //如果用户token不存在则跳转到login页面
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }
    }
})

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数;
也不会改变导航本身;
一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

2.组件路由守卫

你可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用
}

3.路由独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})