## 一、概述 使用 vue-router 实现路由导航功能，因此可以为路由配置一些守卫。 我们统一把导航守卫配置在 router/guards.js 文件中； ## 二、前置守卫 为每个前置导航守卫函数注入 to,from,next,options 四个参数： * `to: Route`: 即将要进入的目标[路由对象](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1) * `from: Route`: 当前导航正要离开的路由对象 * `next: Function`: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。详情查看[Vue Router #导航守卫](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html) * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展。 ~~~ ## 如下，是登录拦截导航守卫的定义 const loginGuard = (to, from, next, options) => { const {message} = options if (!loginIgnore.includes(to) && !checkAuthorization()) { message.warning('登录已失效，请重新登录') next({path: '/login'}) } else { next() } } ~~~ ## 三、后置守卫 你也可以定义后置导航守卫，为每个后置导航函数注入 to,from,options 三个参数： * `to: Route`: 即将要进入的目标[路由对象](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1) * `from: Route`: 当前导航正要离开的路由对象 * `options: Object`: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展。 ~~~ ## 如下，是一个后置导航守卫的定义 const afterGuard = (to, from, options) => { const {store, message} = options // 做些什么 message.info('do something') } ~~~ ## 四、应用 定义好导航守卫后，只需按照类别在 guard.js 中导出即可。分为两类，`前置守卫`和`后置守卫`。如下： ~~~ export default { beforeEach: [loginGuard, authorityGuard], afterEach: [afterGuard] } ~~~