Vue+Nuxt如何实现后台管理系统的权限控制

痛定思痛。 2022-01-26 06:45 405阅读 0赞

页面权限控制分为两种：  
菜单中的页面是否能被访问  
页面中的按钮（增、删、改）的权限控制是否显示  
大致的页面访问权限的流程：

详细实现过程：  
1、创建路由表  
左侧菜单的列表，我放在vuex中的一个模块js中

直接贴代码routerPermission.js：  
state中的permission为模拟的从接口中获取的权限表，slideMenu为左侧导航菜单的列表。  
ROUTER\_MATCH为路由与权限表匹配，将匹配的值放到相应页面的路由中，然后再在页面中使用。

const user = \{  
state: \{  
permission: \[  
\{  
‘path’: ‘/active/active’,  
permission: \[0, 1, 2\]  
\},  
\{  
‘path’: ‘/task/task’,  
permission: \[1, 2\]  
\},  
\{  
‘path’: ‘/resource/resource’,  
permission: \[3, 4\]  
\},  
\{  
‘path’: ‘/theme/theme’,  
permission: \[5, 6\]  
\},  
\{  
‘path’: ‘/organization/org’,  
permission: \[5, 6\]  
\},  
\{  
‘path’: ‘/organization/authority’,  
permission: \[5, 6\]  
\}  
\],  
slideMenu: \[  
\{  
‘id’: 0,  
‘menuBar’: ‘课程管理’,  
‘path’: ‘’,  
‘active’: false,  
‘checked’: false,  
‘slideBar’: \[  
\{  
‘id’: 0,  
‘menuName’: ‘活动内容制作’,  
‘path’: ‘’,  
‘icon’: ‘icon0’,  
‘active’: false,  
‘menu’: \[  
\{  
‘id’: 0,  
‘menuName’: ‘活动目录及教案准备’,  
‘name’: ‘active-active’,  
‘path’: ‘/active/active’,  
‘active’: false,  
‘permission’: \[\]  
\},  
\{  
‘id’: 1,  
‘menuName’: ‘课后亲子任务管理’,  
‘path’: ‘/task/task’,  
‘active’: false,  
‘permission’: \[\]  
\},  
\{  
‘id’: 2,  
‘menuName’: ‘资源上传’,  
‘path’: ‘/resource/resource’,  
‘active’: false,  
‘permission’: \[\]  
\}  
\]  
\},  
\{  
‘id’: 1,  
‘menuName’: ‘主题课程包管理’,  
‘icon’: ‘icon1’,  
‘path’: ‘’,  
‘active’: false,  
‘menu’: \[  
\{  
‘id’: 0,  
‘menuName’: ‘课程包管理’,  
‘path’: ‘/theme/theme’,  
‘active’: false,  
‘permission’: \[\]  
\}  
\]  
\}  
\]  
\},  
\{  
‘id’: 1,  
‘menuBar’: ‘用户及机构管理’,  
‘path’: ‘’,  
‘active’: false,  
‘checked’: false,  
‘slideBar’: \[  
\{  
‘id’: 0,  
‘menuName’: ‘机构管理’,  
‘path’: ‘/organization/org’,  
‘active’: false,  
‘menu’: ‘’,  
‘permission’: \[\]  
\},  
\{  
‘id’: 1,  
‘menuName’: ‘用户权限管理’,  
‘path’: ‘/organization/authority’,  
‘active’: false,  
‘menu’: ‘’,  
‘permission’: \[\]  
\}  
\]  
\}  
\]  
\},  
mutations: \{  
ROUTER\_MATCH: (state, value) => \{  
state.slideMenu.forEach(m => \{  
m.slideBar.forEach(n => \{  
if (n.menu !== ‘’) \{  
n.menu.forEach(q => \{  
state.permission.forEach(pItem => \{  
if (q.path === pItem.path) \{  
q.permission = pItem.permission  
\}  
\})  
\})  
\} else \{  
state.permission.forEach(pItem => \{  
if (n.path === pItem.path) \{  
n.permission = pItem.permission  
\}  
\})  
\}  
\})  
\})  
console.log(‘state.slideMenu’)  
console.log(state.slideMenu)  
\}  
\},  
actions: \{  
routerMatchAction (\{ commit, state \}, params) \{  
commit(‘ROUTER\_MATCH’)  
\}  
\}  
\}

export default user

二、在页面中调取路由权限值，这里都是模拟数据，没调接口

三、页面访问权限  
页面访问权限流程：

页面菜单代码：  
  
<el-menu-item :index=“subItem.id” :key=“subItem.id” @click=“change(subItem.name,subItem.permission)” active-class=“active”>  
\{ \{ subItem.menuName \}\}  
  
  
路由调转：  
change(names,permission)\{  
this.$router.push(\{name:names,params:\{projectId:permission\}\})  
\},  
接下来我们自定义一个vue指令对页面中需要进行鉴权的元素进行判断，比如类似这样的：

test1

注册一个全局指令，利用vnode来访问vue的方法。代码如下：  
//按扭权限指令  
import Vue from ‘vue’  
Vue.directive(‘allow’, \{  
inserted: (el, binding, vnode) => \{  
let permissionList = vnode.context.$route.params.projectId;  
console.log(‘permissionList’)  
console.log(permissionList)  
if (!permissionList.includes(binding.value)) \{  
el.parentNode.removeChild(el)  
\}  
\}  
\})

至此为止，权限控制流程就已经完全结束了。