vue-router 中的路由拦截功能

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

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

Router 对象中的回调函数

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

beforeEach（to，from，next） - 在执行路由前被执行
afterEach（to，from，next） - 在路由已经执行后，已经进入新组件后执行

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

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

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()负责完成该功能），如果没有登录，则强制跳转到登录页面。

vue-router 中的路由拦截功能

Router 对象中的回调函数

TAGS