后台系统权限流程

news2024/11/23 16:30:16

菜单管理

在这里插入图片描述

角色管理

在这里插入图片描述相关逻辑

<template>
  <div>
      <a-tree :checkable="true"
            @check="handlerChecked"
            @select="handlerSelectNode"
     />
  </div>
</template>

<script>
export default {
data(){
 return {
  // 选中节点的key[]
   checkedKeys:[],
   // 角色的权限数组
   permissions:[],
   // actionList的编辑弹窗的显隐
   visiable:false,
   // actionList编辑窗口添加的相关值
   pageAuth:{},
 }
},
methods:{
  handlerSelectNode(selectedKeys, {node}){
      // 这里不应该为叶子节点时弹出，应该为需要actionList的节点弹出，因为CURD页面也是叶子节点。上面图片描述有误，这里纠正
     // if(node.dataRef.isLeaf)  
      if(node.dataRef.needActions)
      {
        this.visiable=true  
      }
  },
  handlerChecked(checkedKeys, {halfCheckedKeys}){
    this.checkedKeys=[...checkedKeys,...halfCheckedKeys]
  },
  // 处理actionList的添加
  handlerAddActionList(pageKey,auth){
     this.pageAuth[pageKey]=auth
     /*
       auth数据格式
       actionList:['add','update','export']，
       ...
     */
  },
  addRole(){
     this.checkedKeys.forEach(v=>{
        this.permissions.push({
           ...this.pageAuth[v],
           permissionId:v,
        })
     })
     const role={
      name:'角色名称',
      permissions:this.permissions,
     }
     return role
  },
}
}
</script>

<style>

</style>

得到的角色数据像这样：

	const role= {
				id: 'admin',
				name: '管理员',
				status: 1,
				creatorId: 'system',
				createTime: 1497160610259,
				permissions: [
					{
						permissionId: 'page1',
						permissionName: '页面1',
						actionList: ['add', 'query', 'get', 'update', 'delete'],
					},
					{
						permissionId: 'page2',
						permissionName: '页面2',
						actionList: ['add', 'query', 'get', 'update', 'delete'],
					},
				],
			}

用户管理

在这里插入图片描述用户返回的数据格式

 const user={
      name:'hhh',
      token:'asfdsadsadfsad',
      roles:[
        {name:'admin1',permissions:[
          {actionList:['add','delete'],permissionId:'xxManage'},
        ]
        },
        {name:'admin2',permissions:[]},
      ],
   }

方案

后端可以返回路由表给前端，采用这种方案时，上面角色管理处的逻辑做稍许改动即可
后端返回前端permissions，前端这边根据permissions和完整的异步路由表得到当前登录用户的路由表，然后将这个路由表挂载到路由上
tip:系统侧边菜单根据当前登录用户的路由表生成。

路由表的过滤

function hasPermission (permission, route) {
  if (route.meta && route.meta.permission) {
    return  permission.some(p => route.meta.permission.includes(p))
   
   // 含有操作权限值（actionList）时，使用下面这个,下面的两个hasPermission函数同理更改
    //  const item=permission.find(v=>route.meta.permission.includes(v.permissionId))
    //  if(item) return item.actionList
    //  else return false
  }
  return true              
}

function filterAsyncRouter (routerMap, user) {
  const accessedRouters = routerMap.filter(route => {
  // 取出该用户完整的permission。如果该有多个角色，需要合并得到完整的permmssion
    const  hasAuth=hasPermission(user.permissions, route)   
     if (hasAuth) {
      if(Array.isArray(hasAuth)) route.meta.actionList=hasAuth   // 把actionList添加到meta上
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}

// asyncRoutes是完整的异步路由表
const routes=filterAsyncRouter(asyncRoutes,user)