后台权限管理方案

权限管理方案

展示效果：

1.注册v-auth指令 给要添加权限的按钮绑定 v-auth指令

//在vuex中从后台获取当前用户的所有权限
 @Action
    async getUserPermissionAction(accountId) {
        let params: PermissionListParams = {
            accountId
        }
        //穿当前用户的角色ID 获取当前角色的所有权限
        const userPermissionList = await getPermissionList(params)
        this.commitUserPermissionModule(userPermissionList);
    }
	
//把权限分为后台接口权限和前端路径权限
    @Mutation
    commitUserPermissionModule(permissionList): void {
        let api = {}, web = {};
        permissionList.list.map((v: { frontUrl: string | number; backstageUrl: string | number; }) => {
            if (v.frontUrl) {
                web[v.frontUrl] = v
            }
            if (v.backstageUrl) {
                api[v.backstageUrl] = v
            }
        })
        //后台接口权限
        this.apiPermissionList = api;
		//前端路径权限
        this.webPermissionList = web;
    }
    
//新建permission.ts文件 
import type { App, Directive, DirectiveBinding } from 'vue';
import { permissionStore } from '/@/store/modules/permission';
import { userStore } from '/@/store/modules/user';
import { getAllApiUrl } from '/@/utils/common-method'

function isAuth(el: Element, binding: any) {
    //apiList 所有后台接口路径
  const value = binding.value, apiList: string[] = getAllApiUrl();

    //超级管理员 不检查权限 拥有所有权限
  if (!value || userStore.getUserInfoState['username'] === '超级管理员') {
    return
  };
  if (apiList.includes(value)) {
    //匹配上了证明是后端接口URL  permissionStore.getApiPermissionListState中有(value)传入的路径 就是有这个权限 没有的话el.parentNode?.removeChild(el);删除这个dom元素 页面不显示这个按钮
    if (!permissionStore.getApiPermissionListState[`/${value}`]) {
      el.parentNode?.removeChild(el);
    }
  } else {
    //否则是前端页面URL permissionStore.getWebPermissionListState中有(value)传入的路径 就是有这个权限 没有的话el.parentNode?.removeChild(el); 不显示进入这个页面的入口
    if (!permissionStore.getWebPermissionListState[value]) {
      el.parentNode?.removeChild(el);
    }
  }
}

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
};

const authDirective: Directive = {
  mounted,
};
//  注册v-auth指令
export function setupPermissionDirective(app: App) {
  app.directive('auth', authDirective);
}
//main.ts引入
(async () => {
  const app = createApp(App);
  setupGlobalDirectives(app);
  app.mount('#app');
})();

//新建角色管理页面 多选框，提交给后台当前角色有哪些权限，新建用户时给用户分配角色


//页面中使用
<button v-auth="order/delete">删除</button>