如何从零开始设计一套权限&路由鉴权体系？【系列一】

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

基于vue的单页应用首先需要处理的就是路由拦截，登录鉴权，操作鉴权等等内容，接下来，就以一个中台管理系统为例，从零实现相关功能

创建项目

vue create authority-demo

Vue CLI v5.0.4 > Manually select features

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

 (*) Babel
 
 ( ) TypeScript
 
 ( ) Progressive Web App (PWA) Support
 
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

...省略掉不必要的操作步骤...

wating install

cd authority-demo

实现思路

1. 首先我们需要做的事情是要在vue初始化完成后，进入页面前，挂载相应的拦截处理，所以首先需要在入口文件 main.js里引入我们的整个鉴权执行器
2. 加载 vuex i18n eg...
3. 加载 axios interceptors 请求拦截器
4. 加载 路由
5. 加载全局导航守卫
6. 如果鉴权通过，自动挂载一次用户及角色权限相关的信息(处理cache的情况)

main.js加载全局鉴权执行器

import Vue from 'vue'
/* 引入vuex实例 */
import store from './store'
/* 引入全局鉴权执行器 */
import bootstrap from '@/bootstrap'
/* i18n 初始化函数 */
import { initI18n } from '@/utils/i18n'
/* 引入初始化路由函数 */
import { initRouter } from './router'
/* store.state.setting.asyncRoutes 是否支持异步路由 */
const router = initRouter(store.state.setting.asyncRoutes)
const i18n = initI18n('CN', 'US')
bootstrap({ router, store, i18n, message: Vue.prototype.$message })

bootstrap.js

import { loadRoutes, loadGuards, setAppOptions } from '@/utils/routerUtil'
import { loadInterceptors, checkAuthorization } from '@/utils/request'
import { loadUserInfo } from '@/utils/userInfoUtil'
import guards from '@/router/guards'
import interceptors from '@/utils/axios-interceptors'

/**
 * 启动引导方法
 * 应用启动时需要执行的操作放在这里
 * @param router 应用的路由实例
 * @param store 应用的 vuex.store 实例
 * @param i18n 应用的 vue-i18n 实例
 * @param message 应用的 message 实例
 */
function bootstrap ({ router, store, i18n, message }) {
  // 设置应用配置
  setAppOptions({ router, store, i18n })
  // 加载 axios 拦截器
  loadInterceptors(interceptors, { router, store, i18n, message })
  // 加载路由
  loadRoutes()
  // 加载路由守卫
  loadGuards(guards, { router, store, i18n, message })
  if (checkAuthorization()) {
    loadUserInfo({ router, store, i18n, message })
  }
}

export default bootstrap

bootstrap.js 相关配置 解析我们下期再写。。

未完待续。。。。。