在企业应用中,往往需要对某些功能(页面)进行保护,当用户没有登录,或是没有足够的权限使用指定功能时,需要拦截用户的导航动作。

在 vue-router 中,拦截器是通过回调函数来实现的。这些回调函数可以分为两类,一类是在 router 对象上的,一旦设定,对该路由对象上定义的所有路由规则都起作用,有些文章中也称为全局回调函数;另一类是在组件对象上的,这类拦截器只在路由跳转到该组件时会被激活。

Router 对象中的回调函数

Router对象上的回调函数是一下两个:

  1. beforeEach(to,from,next) - 在执行路由前被执行
  2. afterEach(to,from,next) - 在路由已经执行后,已经进入新组件后执行

下面以一个简单的例子来说明如何使用 Router 对象上的回调函数。假设在应用中出了根目录(登录页面)以外,其它所有的页面都需要用户已经登录才能访问,否则将会被强制跳转到登录界面。

修改 router.js 文件,加入 beforeEach 方法:

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
import SecAccessor from './biz/security/security'

Vue.use(Router)

const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'login',
component: LoginPage
},
{
path: '/list',
name: 'list',
component: ListPage
}
],
})

router.beforeEach((to, from, next) => {
if (to.name !== 'login') {
if (!SecAccessor.isLogin()) {
router.push({name: 'login'})
} else {
next()
}
} else {
next()
}
})

export default router;

从代码第22行开始是定义拦截器,我们判断目标地址是否是 login, 如果不是,则需要判断用户当前是否已经登录(函数SecAccessor.isLogin()负责完成该功能),如果没有登录,则强制跳转到登录页面。