【Vue框架】vue路由导航守卫

1. 导航守卫的作用

2. vue中的全局前置守卫

1. 每次发生路由的导航跳转时，都会触发全局前置守卫。
2. 在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。

2.1 语法

// 声明全局前置导航守卫
// 只要发生了路由的跳转，一定会触发beforeEach指定的function 回调函数
router.beforeEach(function(to, from, next) {
    // to: 将要访问的路由的信息对象
    // from： 将要离开的路由的信息对象
    // next() : 放行
    next()
})
1
2
3
4
5
6
7
8

2.2 next函数的三种调用方式示意图

2.3 控制后台主页的访问权限的代码实现

router.beforeEach(function(to, from, next) {
    if(to.path === '/main') {
        const token = localStorage.getItem('token')
        if(token) {
            // 访问的后台主页，且有token，直接放行
            next()
        } else {
            // 访问后台主页，但是没有token，则要先登录才能访问
            next('/login')
        }
    } else {
        // 访问的不是后台主页，直接放行
        next()
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

参考： 黑马vue视频，感谢llb老师。