Vue路由权限管制
当咱们在做后盾管理系统的时候，都会波及到零碎左侧的菜单树如何动态显示的问题。目前基本上都是RBAC的解决方案，即Role-Based Access Control，权限与角色相关联，用户通过成为适当角色的成员而失去这些角色的权限。这就极大地简化了权限的治理。
vue有很多优良的后盾管理系统模板，这些开源我的项目都提供了RBAC权限管制的思路，然而在理论我的项目中，写死角色的形式可能并不适宜。
看了网上蛮多的解决方案，个人感觉都有弊病，好多都是前端先把残缺的路由表注册到我的项目中，而后通过后盾返回树过滤显示的计划，这样的做法其实只是暗藏了左侧菜单，然而路由还是曾经注册进去了，用户猜到拜访门路还是能够轻易进入页面，没有真正的做到动静路由加载
以下是我设计的解决方案，自己小白，仅供参考 -。-
先看一下曾经实现的系统结构，用户绑定角色(一对多)，角色绑定菜单(一对多)
用户菜单
抉择角色
角色菜单
抉择菜单，因为本我的项目是多零碎，所以会有 ADMIN 和 HMI 两个子系统，前面再来解释
资源管理(我这里没有叫做菜单治理，因为会波及到各个子系统我称作模块，模块上面有菜单，菜单上面有按钮)
好了，看完几张图大家预计也明确了这就是典型的RBAC。外部具体怎么运作的呢
要实现动静增加路由，即只有有权限的路由才会注册到Vue实例中，外围是vue-router的addRoutes和导航钩子beforeEach两个办法
大体思路为，在beforeEach办法中(即每次路由跳转之前做判断)，如果曾经加载了路由表，则把路由表注册到实例中，如果没有，则从后端拉取路由表注册到实例中。那为什么不在登录的时候加载一次就能够了呢？这是因为如果只是登录的时候加载一次，网页刷新的时候注册的路由表会失落，所以咱们对立在beforeEach这个钩子中去实现
// permission.js,此文件在main.js中间接导入即可，这边的思路是仿照的element-adminimport router from './router'import store from './store'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport Cookies from 'js-cookie'import screenfull from 'screenfull'router.beforeEach(async (to, from, next) => { const token = Cookies.get('token') NProgress.start() if (token) { // 如果曾经处于登录状态，跳到登录页重定向到首页 if (to.path === '/login') { next({ path: '/' }) NProgress.done() } else { if (!store.state.authorized) { try { router.addRoutes(await store.dispatch('setAccessRoutes')) store.dispatch('setAllDict') next({ ...to, replace: true }) } catch (e) { Cookies.remove('token') Cookies.remove('userInfo') next({ path: '/login' }) NProgress.done() } } else { next() // 全屏参数判断该页面是否全屏 if (!screenfull.isEnabled) return if (to.meta && to.meta.fullScreen) { screenfull.request().catch(() => null) } else { if (screenfull.isFullscreen) { screenfull.exit() } } } } } else { next(to.path !== '/login' ? { path: '/login' } : true) }})router.afterEach(() => { NProgress.done()})因为路由是动静注册的，所以我的项目的初始路由就会很简洁，只有提供根底的路由，其余路由都是从服务器返回之后动静注册进来的
// router.jsimport Vue from 'vue'import Router from 'vue-router'import Login from 'modules/Login'import NoPermission from 'modules/NoPermission'Vue.use(Router)// Fixed NavigationDuplicated Problemconst originalPush = Router.prototype.pushRouter.prototype.push = function push(location, onComplete, onAbort) { if (onComplete || onAbort) return originalPush.call(this, location, onComplete, onAbort) return originalPush.call(this, location).catch(err => err)}const createRouter = () => new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: [ { path: '/', redirect: '/platform' }, { path: '/noPermission', component: NoPermission }, { path: '/login', component: Login } ] })const router = createRouter()export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router}export default routerwebpack之前不反对动静编译，所以很多我的项目都在路由表保护了一份映射表如下：
const routerMap = { user: () => import('/views/user'), role: () => import('/views/role'), ...}我感觉这样很不nice，最新版的vue-cli集成的webpack曾经能够反对动静导入啦，因而能够把所有的路由信息全副放到数据库外面配置，前端不在须要保护一份router的映射关系表啦，如果你是老版的CLI，能够应用dynamic-import
咱们再来看看上面这个神奇的文件，也能够大抵浏览一下而后看上面的解释
// menu.json// id:轻易是什么规定，只有惟一就行，这里前端写死ID而不是每次导入数据库时候再生成是因为如果每次入库的时候从新生成会失落之前的关联关系// title:菜单的题目// name:惟一标识// type:'MD'代表模块(子系统),'MN'代表菜单，'BT'代表按钮，如果须要管制到按钮权限则须要配置到BT级别// icon:菜单的图标// uri:菜单的路由地址// componentPath:该菜单在对应前端我的项目的门路，在后续的store.js会看到用法，就是上述说的不须要在写一份routerMap// hidden:作为菜单的时候是否在左侧显示，有些菜单比方某个列表的详情页，须要注册到实例中，然而并不需要在左侧菜单栏显示// noCache:因为我的项目页面减少了缓存管制，因而该字段用于判断以后页面是否须要缓存// fullScreen:有些菜单，进入的时候就是全屏展现的，例如某些大屏展现页面，通过该字段配置// children:和上述字段一样[ { "id": "00b82eb6e50a45a495df301b0a3cde8b", "title": "SV ADMIN", "name": "ADMIN", "type": "MD", "children": [ { { "id": "06f1082640a0440b97009d536590cf4f", "title": "系统管理", "name": "system", "icon": "el-icon-setting", "uri": "/system", "componentPath": "modules/Layout", "type": "MN", "children": [ { "id": "b9bd920263bb47dbbfbf4c6e47cc087b", "title": "用户治理", "name": "principal", "uri": "principal", "componentPath": "views/system/principal", "type": "MN", "children": [ { "id": "b37f971139ca49ab8c6506d4b30eddb3", "title": "新增", "name": "create", "type": "BT" }, { "id": "d3bcee30ec03432db9db2da999bb210f", "title": "编辑", "name": "edit", "type": "BT" }, { "id": "7c2ce28dcedf439fabc4ae9ad94f6899", "title": "删除", "name": "delete", "type": "BT" }, { "id": "bdf4d9e8bf004e40a82b80f0e88c866c", "title": "批改明码", "name": "resetPwd", "type": "BT" }, { "id": "ba09f8a270e3420bb8877f8def455f6f", "title": "抉择角色", "name": "setRole", "type": "BT" } ] }, { "id": "c47c8ad710774576871739504c6cd2a8", "title": "角色治理", "name": "role", "uri": "role", "componentPath": "views/system/role", "type": "MN", "children": [ { "id": "81c0dca0ed2c455d9e6b6d0c86d24b10", "title": "新增", "name": "create", "type": "BT" }, { "id": "19a2bf03e6834d3693d69a70e919d55e", "title": "编辑", "name": "edit", "type": "BT" }, { "id": "6136cc46c45a47f4b2f20e899308b097", "title": "删除", "name": "delete", "type": "BT" }, { "id": "ad5cf52a78b54a1da7c65be74817744b", "title": "设置菜单", "name": "setMenu", "type": "BT" } ] }, { "id": "8b5781640b9b4a5cb28ac616da32636c", "title": "资源管理", "name": "resource", "uri": "resource", "componentPath": "views/system/resource", "type": "MN", "children": [ { "id": "d4182147883f48069173b7d173e821dc", "title": "新增", "name": "create", "type": "BT" }, { "id": "935fcb52fffa45acb2891043ddb37ace", "title": "编辑", "name": "edit", "type": "BT" }, { "id": "3f99d47b4bfd402eb3c787ee10633f77", "title": "删除", "name": "delete", "type": "BT" } ] } ] }, } ] }, { "id": "fc8194b529fa4e87b454f970a2e71899", "title": "SV HMI", "name": "HMI", "type": "MD", "children": [ { "id": "eb5370681213412d8541d171e9929c84", "title": "启动检测","name": "001" }, { "id": "06eb36e7224043ddbb591eb4d688f438", "title": "设施信息","name": "002" }, { "id": "76696598fd46432aa19d413bc15b5110", "title": "AI模型库","name": "003" }, { "id": "2896f3861d9e4506af8120d6fcb59ee1", "title": "颐养培修","name": "004" }, { "id": "91825c6d7d7a457ebd70bfdc9a3a2d81", "title": "持续","name": "005" }, { "id": "24694d28b2c943c88487f6e44e7db626", "title": "暂停","name": "006" }, { "id": "225387753cf24781bb7c853ee538d087", "title": "完结","name": "007" } ] }]以上是前端的路由配置信息，之前提到过，路由是后端返回的，为什么前端还有一份菜单文件呢？
- 因为路由外面的内容全部都是前端须要应用的，比方菜单显示的图表，菜单对应的前端门路等等...既然和前端关系比拟大，所以前端保护该文件更适宜，而不是让后端去配置XML或者liquibase，你每次菜单有批改的时候要告诉你的后盾要更新一下数据库，而后切换多个环境的时候每个后盾都要告诉一声...后盾还不肯定乐意X你...而后你想改个小图标都要小心翼翼被你的后盾大佬怼...
Question:
既然前端有该文件，是不是意味着路由的源码又裸露进来了，那和他人的猜门路就能够拜访有什么区别？不是说好了从数据库拉取菜单信息，你跟我间接用这个json，那数据库咋整？别急...
Answer:
- 这只是前端用来mock的
配置文件，build的时候不会打包该内容。 - 在用户角色菜单这些关联关系还没有建设之前，菜单只能通过mock来建设，这个时候间接读取前端的配置文件...额，真香，具体是怎么做到的能够看上面store.js的做法
- 菜单始终由前端来保护，当须要上线的时候，前端能够通过node将menu.json生成SQL语句导入到数据库中。前面会介绍
接下来就是如何注册这些路由表了
// store.jsimport Vue from 'vue'import Vuex from 'vuex'import Cookie from 'js-cookie'import NotFound from 'modules/NotFound'import { resetRouter } from '../router'import { getUserResourceTree, getDictAllModel } from 'apis'import { deepClone } from 'utils/tools'// 此处的IS_TESTING就是用来判断以后是拉取数据库的实在菜单还是间接用前端的menu.json，在资源的关联关系还没有建设之前十分有用import { IS_TESTING } from '@/config'import { Message } from 'element-ui'Vue.use(Vuex)// 生产可拜访的路由表const createRouter = (routes, cname = '') => { return routes.reduce((prev, { type, uri: path, componentPath, name, title, icon, redirectUri: redirect, hidden, fullScreen, noCache, children = [] }) => { // 是菜单项就注册到路由进去 if (type === 'MN') { prev.push({ path, // 此处就是webpack动静导入啦，是不是so easy，妈妈再用不必放心我再写一份routerMap放到源码里了 component: () => import(`@/${componentPath}`), name: (cname + '-' + name).slice(1), props: true, redirect, meta: { title, icon, hidden: hidden === 'Y', type, fullScreen: fullScreen === 'Y', noCache: noCache === 'Y' }, children: children.length ? createRouter(children, cname + '-' + name) : [] }) } return prev }, [])}// 生产权限按钮表const createPermissionBtns = router => { let btns = [] const c = (router, name = '') => { router.forEach(v => { v.type === 'BT' && btns.push((name + '-' + v.name).slice(1)) return v.children && v.children.length ? c(v.children, name + '-' + v.name) : null }) return btns } return c(router)}export default new Vuex.Store({ state: { collapse: false, // 菜单栏是否膨胀 authorized: false, // 是否拉取了受权菜单 dict: {}, accsessRoutes: [], // 已注册的路由 permissionBtns: [], // 有权限的按钮 navTags: [], // 标签导航列表 cachedViews: [] // 缓存的页面 }, getters: { collapse: state => state.collapse, cachedViews: state => state.cachedViews, accsessRoutes: state => state.accsessRoutes, // 菜单栏(过滤掉hidden) menuList: state => { const filterMenus = menus => { return menus.filter(item => { if (item.children && item.children.length) { item.children = filterMenus(item.children) } return item.meta && !item.meta.hidden }) } return filterMenus(deepClone(state.accsessRoutes)) }, navTags: state => state.navTags }, mutations: { SET_ACCSESS_ROUTES(state, accsessRoutes) { state.authorized = true state.accsessRoutes = accsessRoutes }, SET_ALL_DICT(state, dict) { state.dict = dict }, SET_PERMISSION_BTNS(state, btns) { state.permissionBtns = btns }, SET_COLLAPSE(state, flag) { state.collapse = flag }, SET_CACHED_VIEWS(state, cachedViews) { state.cachedViews = cachedViews }, // 退出登录 LOGOUT: state => { state.cachedViews = [] state.authorized = false resetRouter() Cookie.remove('token') Cookie.remove('userInfo') } }, actions: { setAccessRoutes: ({ commit }) => { return new Promise(async (resolve, reject) => { // 404页面抉择在动静增加路由之后再注册进来，是因为如果开始就注册到我的项目中，在addRoutes之后会无限匹配该404，造成BUG const routerExt = [ { path: '*', redirect: '/404' }, { path: '/404', component: NotFound } ] // getUserResourceTree这个接口逻辑是查问以后登录人角色所蕴含的资源，过滤出模块名(这里是ADMIN)上面的子节点（蕴含菜单和按钮） const res = await (IS_TESTING ? import('@/mock/menu.json') : getUserResourceTree('ADMIN')) if (!res) return reject() let router if (IS_TESTING) { // 这里取第0个是因为我这个零碎是属于大零碎的第一个子系统，在菜单menu.json能够看到 router = res[0].children } else { if (!res.data.length) { reject() return Message.error('用户未配置菜单或菜单配置不正确，请查看后重试~') } else { router = res.data } } const accessRoutes = createRouter(router).concat(routerExt) commit('SET_ACCSESS_ROUTES', accessRoutes) commit('SET_PERMISSION_BTNS', createPermissionBtns(router)) resolve(accessRoutes) }) }, setAllDict: async ({ commit }) => { if (IS_TESTING) return const res = await getDictAllModel() if (!res) return commit('SET_ALL_DICT', res.data) }, logout: ({ commit }) => { return new Promise(resolve => { commit('LOGOUT') resolve() }) } }})好了，最初一步就是在上线的时候如何把menu.json变成数据库的SQL，之后就能够把IS_TESTING改为false，真正拉取数据库的菜单啦
// createMenu.jsconst fs = require('fs')const path = require('path')const chalk = require('chalk')const resolve = dir => path.join(__dirname, dir)const format = (data = new Date(), fmt = 'yyyy-MM-dd') => { let o = { 'M+': data.getMonth() + 1, // 月份 'd+': data.getDate(), // 日 'h+': data.getHours(), // 小时 'm+': data.getMinutes(), // 分 's+': data.getSeconds(), // 秒 'q+': Math.floor((data.getMonth() + 3) / 3), // 季度 S: data.getMilliseconds() // 毫秒 } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (data.getFullYear() + '').substr(4 - RegExp.$1.length)) } for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)) } } return fmt}// 导出的文件目录地位const SQL_PATH = resolve('./menu.sql')// 导出SQL的函数function createSQL(data, name = '', pid = '0', arr = []) { data.forEach(function(v, d) { if (v.children && v.children.length) { createSQL(v.children, name + '-' + v.name, v.id, arr) } arr.push({ id: v.id, created_at: format(new Date(), 'yyyy-MM-dd hh:mm:ss'), modified_at: format(new Date(), 'yyyy-MM-dd hh:mm:ss'), created_by: 1, modified_by: 1, version: 1, is_delete: 'N', code: (name + '-' + v.name).slice(1), name: v.name, title: v.title, icon: v.icon, uri: v.uri, sort: d + 1, parent_id: pid, type: v.type, component_path: v.componentPath, redirect_uri: v.redirectUri, full_screen: v.fullScreen === 'Y' ? 'Y' : 'N', hidden: v.hidden === 'Y' ? 'Y' : 'N', no_cache: v.noCache === 'Y' ? 'Y' : 'N' }) }) return arr}fs.readFile(resolve('src/mock/menu.json'), 'utf-8', (err, data) => { const menuList = createSQL(JSON.parse(data)) const sql = menuList .map(sql => { let value = '' for (const v of Object.values(sql)) { value += ',' value += v ? `'${v}'` : null } return 'INSERT INTO `t_sys_resource` VALUES (' + value.slice(1) + ')' + '\n' }) .join(';') const mySQL = 'DROP TABLE IF EXISTS `t_sys_resource`;' + '\n' + 'CREATE TABLE `t_sys_resource` (' + '\n' + '`id` varchar(64) NOT NULL,' + '\n' + "`created_at` timestamp NULL DEFAULT NULL COMMENT '创立工夫'," + '\n' + "`modified_at` timestamp NULL DEFAULT NULL COMMENT '更新工夫'," + '\n' + "`created_by` varchar(64) DEFAULT NULL COMMENT '创建人'," + '\n' + "`modified_by` varchar(64) DEFAULT NULL COMMENT '更新人'," + '\n' + "`version` int(11) DEFAULT NULL COMMENT '版本（乐观锁）'," + '\n' + "`is_delete` char(1) DEFAULT NULL COMMENT '逻辑删除'," + '\n' + "`code` varchar(150) NOT NULL COMMENT '编码'," + '\n' + "`name` varchar(50) DEFAULT NULL COMMENT '名称'," + '\n' + "`title` varchar(50) DEFAULT NULL COMMENT '题目'," + '\n' + "`icon` varchar(50) DEFAULT NULL COMMENT '图标'," + '\n' + "`uri` varchar(250) DEFAULT NULL COMMENT '门路'," + '\n' + "`sort` int(11) DEFAULT NULL COMMENT '排序'," + '\n' + "`parent_id` varchar(64) DEFAULT NULL COMMENT '父id'," + '\n' + "`type` char(2) DEFAULT NULL COMMENT '类型'," + '\n' + "`component_path` varchar(250) DEFAULT NULL COMMENT '组件门路'," + '\n' + "`redirect_uri` varchar(250) DEFAULT NULL COMMENT '重定向门路'," + '\n' + "`full_screen` char(1) DEFAULT NULL COMMENT '全屏'," + '\n' + "`hidden` char(1) DEFAULT NULL COMMENT '暗藏'," + '\n' + "`no_cache` char(1) DEFAULT NULL COMMENT '缓存'," + '\n' + 'PRIMARY KEY (`id`),' + '\n' + 'UNIQUE KEY `code` (`code`) USING BTREE' + '\n' + ") ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='资源';" + '\n' + sql fs.writeFile(SQL_PATH, mySQL, err => { if (err) return console.log(err) console.log(chalk.cyanBright(`祝贺你，创立sql语句胜利，地位：${SQL_PATH}`)) })})// package.json"scripts": { "build": "vue-cli-service build", "lint": "vue-cli-service lint", "dev": "vue-cli-service serve", "menu": "node createMenu" },须要生成SQL的时候执行一下 npm run menu 就好啦为了不便，以上SQL是会先删除资源表再从新创立，导入数据库之前记得备份一下。
整个流程是不是so easy?so easy?so easy?
后盾表建好了之后前端本人玩，自力更生的感觉香不香？
自己前端资深小白，不足之处还望各位指教~