管理后台项目的路由鉴权
项目背景
后台管理系统，项目前端使用的是@花裤衩 大佬的vue-element-admin，感谢。
前端鉴权是啥
前端鉴权是啥？简单说就是针对一个模块，不同的操作人拥有不同的操作权限，这是后台管理系统一个很常见的需求。本次项目历经了三次不同的鉴权方式，所以做个分享。
前端鉴权的方式
第一种，也是@花裤衩大佬帮咱们写好的。在配置路由时，在路由元信息（router.meta）中配置roles，然后根据接口返回的用户角色信息，过滤出一个路由表，然后再渲染出不同的菜单。具体的代码实现可以去看vue-element-admin的源码，或者看大佬写的文章手摸手，带你用vue撸后台 系列二(登录权限篇)，再次感谢@花裤衩。这种方式的优点是比较简单，缺点是不够灵活。 第二种，前端有一份完整的路由表，接口返回一个permission数组，permission数组里存的就是当前用户拥有的权限，然后permission与本地的路由表做匹配（例如使用name属性），得到一份过滤后的路由表，然后再进行渲染。这个过程中可能需要需要扁平化数组对象。这种方式已经基本满足需求了，但是后端小伙伴说前端有完整路由表不够安全而且还是不够灵活。export const flatArrayJson = (arr, key) => { var newArr = [] function flatByKey(reArr) { reArr.forEach(item => { if (item[key] && item[key].length > 0) { const keyArr = item[key] flatByKey(keyArr) } delete item[key] newArr.push(item) }) } flatByKey(arr) return newArr } 第三种，也是现在采用的方式，所有的路由信息都放在数据库，前端本地只有组件映射关系，然后根据接口返回的permision递归出最终的路由。这种方式优点是非常灵活，但是对前端小伙伴不友好，因为.....现在所有的路由信息都要我自己去数据库配置。
// index.js // 路由映射关系 export const routeMap = { layout: Layout, systemUser: () => import('@/views/system/user/index'), systemRole: () => import('@/views/system/role/index'), systemLog: () => import('@/views/system/log/index') }
要注意的点是只有一层的路由需要添加layout，可以配一个特殊字段来区分。
import { routeMap, constantRoutes } from '@/router' if (route.parentComponent && route.parentComponent === 'layout') { const tmpOnlyOne = { path: route.path || '', component: Layout, hidden: route.hidden !== 2, children: [ { path: '', component: routeMap[route.component], name: route.routerName, hidden: route.hidden !== 2, id: route.id, meta: evil('(' + route.meta + ')') } ] } }
按钮权限的控制
// 传入按钮所属页面的$route.name以及按钮的名称 export default function checkPermission(name, btnName) { const filterArr = store.getters.permission.filter(item => item.routerName === name) // 筛选出按钮的父级路由 if (filterArr.length > 0) { return store.getters.permission.some(f => f.name === btnName && f.parentId === filterArr[0].id) } else { return false } }
