教你快速看懂 vue 路由守卫

路由守卫顾名思义就是相当于一个保安给我们看家，要想进入家门就必须通过保安的安检。通常我们用来判断用户是否登录，我们的某一个页面用户是否有权限浏览，需要结合meta来实现。

vue中路由守卫一共分为三种：

1. 全局路由守卫
2. 组件内路由守卫
3. router独享路由守卫

下面逐一进行介绍

一、 全局路由守卫

要想进入一个需要权限的页面，我们必须要通过路由守卫进行校验，如果你有权限我的路由就执行，反之不执行路由

全局路由守卫有分为两个：

1. 全局前置路由守卫（beforeEach），它在页面初始化的时候调用、每次路由切换之前被调用

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

const router = new Router({
    // 路由的两种模式，hash和history两种模式
    mode: 'history',
    routes: [{
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
            title: '主页',
            isAuth: true
        }
    }]
})

// 全局前置路由守卫 初始化的时候调用、每次路由切换之前被调用
 router.beforeEach((to, from, next) => {
     if (to.meta.isAuth) {
         if (localStorage.getItem('admin') === 'liuxu') {
             next()
         } else {
             alert(`您不是${localStorage.getItem('admin')}，无权查看！！！！`)
         }
     } else {
         next()
     }

 })

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

上面代码是一个全局路由守卫的案例，可以看的出来，beforEach有三个参数，to，from，next这三个参数，to表示我要跳转的目标路由对应的参数，from表示来自那个路由，就是操作路由跳转之前的，即将离开的路由对应的参数，next是一个回调函数，一定要调用next方法来resolve这个钩子函数，否则就算检验通过路由也不会进行跳转；我们还用了meta配置项，这个作用就是我们程序员可以自定义一些属性在里面，我这里定义了一个isAuth，因为以后可能多个路由需要进行权限校验，只要isAuth为true的时候就需要权限。

2. 全局后是路由守卫（afterEach），他会在我们路由成功跳转以后执行

router.afterEach((to, from) => {
    document.title = to.meta.title || '系统'
})
1
2
3

afterEach有两个参数，to和from，值得注意的是并没有next参数，因为后置路由已经执行完了，我们不需要next()。
上面的代码体现出来后置守卫的应用，当我们跳转以后，我们要让页签的title显示对应的名字，我在route配置项中meta中自定义了title属性，只要我们跳转到对应的路由我们的也签则显示对应的title。

二、组件的路由守卫

组件内路由守卫我们分为三个，他们在我们组件内部的js中进行编写，只针对当前路由页面有效，比如我们这个路由页面需要权限，那我们就要进行校验。

beforeRouteEnter(to, from, next) {
// 进入当前路由是调用
},

beforeRouteUpdate(to, from, next){
//同一个页面，刷新不同数据调用
}  

beforeRouteLeave(to, from, next) {
   // 离开当前路由页面调用
  next();
 },
1
2
3
4
5
6
7
8
9
10
11
12

三个分不同时段进行调用，beforeRouteEnter进入当前路由页面是调用，三个参数和全局守卫一样；beforeRouteUpdate同一个页面，刷新不同数据时调用；beforeRouteLeave离开当前路由页面时调用，值得我们注意的是，在这个钩子里面，无论beforeRouteEnter里面进行了什么校验，在beforeRouteLeave里必须next()，否则就算校验通过也不会跳转路由。

三、路由独享守卫

路由独享守卫是写在我们route配置项里面的。所谓独享，就是哪个路由需要，就写在哪个路由配置项里面。

const router = new Router({
    // 路由的两种模式，hash和history两种模式
    mode: 'history',
    routes: [{
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
            title: '主页',
            isAuth: true
        }，
        beforeEnter: ((to, from, next) => {
        
        }
    }]
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

它只针对当前路由配置项，只有beforeEnter，注意没有afterEnter，独享路由守卫只有beforeEnter，用法和全局前置守卫、组件内路由守卫一样。