改为从后台拿动态指令权限,大概如下步骤:
1、后台修改接口返回 指令权限 数据
2、修改 src/store/modules/permission.js 修改 generateRoutes,添加保存 指令权限
3、修改验证指令去权限方法(checkPermission: src/utils/permission.js、v-permission: src/diective/permission/permission.js)
一、后台修改接口返回 指令权限 数据
后续想根据后台接口权限一样的判断方式,按照 sys:role:list 方式判断,具体还没想好。所以这里先在接口返回中添加 directives 字段。代码如下:
List<String> directiveList = new ArrayList<>(); directiveList.add("sys:role:list"); directiveList.add("ft:edit_test_case"); retMap.put("directives", directiveList);
二、修改 generateRoutes 将 指令权限 存入 store 中
代码如下:这个地方很简单,就是在上一次修改路由的地方添加存 store 的方法
const state = { routes: [], addRoutes: [], directive_permission: [] // 指令权限 } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) }, // 设置指令权限 SET_DIRECTIVES: (state, directives) => { state.directives = directives } } const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { // 从后台请求到的路由 getPermission().then(response => { // 整理后台返回的路由 let accessedRoutes = response.data.routes.filter(item => { return pruningRoutes(item) }) // 拿回后台返回数据后,设置指令权限 // todo:这里后续还要加整理数据代码,可能后台会返回如下格式 [{"directive":{"name":"sys:role:list","role":["admin","user"]}},{"directive":{"name":"ft:edit_test_case","role":["user"]}}] // 最终 directives 保存的是改用户角色下所有的指令权限的字符数组 let accessedDirectives = response.data.directives commit('SET_DIRECTIVES', accessedDirectives) accessedRoutes = accessedRoutes.concat(asyncRoutes) // 合并异步路由(例如将404页面合并入可访问路由) accessedRoutes = filterAsyncRoutes(accessedRoutes, roles) // 通过递归根据角色过滤异步路由 commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) }) } }
三、修改 checkPermission
四、修改 v-permission