# class210624-admin **Repository Path**: CodeHare/class210624-admin ## Basic Information - **Project Name**: class210624-admin - **Description**: Vue + Typescript + Ant Design Vue + Pinia + Windicss + Vue-i18n + ECharts - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 6 - **Created**: 2022-11-27 - **Last Updated**: 2022-11-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 后台动态权限管理 ## 实现过程 ### 1. 在项目配置将系统内权限模式改为 BACK 模式 ```ts // ! 改动后需要清空浏览器缓存 // src/settings/projectSetting.ts const setting: ProjectConfig = { // 权限模式 permissionMode: PermissionModeEnum.BACK, }; ``` ### 2. 修改获取后端动态路由代码 - 请求后端动态路由地址和项目模板不一样 ```ts // src/api/sys/menu.ts enum Api { GetMenuList = '/admin/acl/index/menu', } ``` - 返回值数据结构和项目模板不一样 ```ts // 按钮权限列表随着路由菜单一起请求回来的,不需要额外请求了 async changePermissionCode(codeList) { // const codeList = await getPermCode(); this.setPermCodeList(codeList); }, ``` ```ts // src/store/modules/permission.ts 187行 // 发送请求,请求菜单 // 此时返回了两个权限列表 // permissionList 按钮权限列表 // menuList 路由权限列表 const { permissionList, menuList } = (await getMenuList()) as AppRouteRecordRaw[]; // 更新按钮权限列表 this.changePermissionCode(permissionList); // 对路由权限列表进行格式化,格式化成项目要求 routeList = menuList.slice(0, 2).map((route: any) => { const path = `/${route.code.toLowerCase()}`; if (route.children && route.children.length) { return { path, name: route.code, component: 'LAYOUT', redirect: `${path}/${route.children[1].code.toLowerCase()}`, meta: { title: route.name, icon: 'ant-design:home-outlined', }, children: route.children .map((cRoute) => { const cPath = cRoute.code.toLowerCase(); if (cRoute.name === '分类管理') { return; } return { path: cPath, name: cRoute.code, component: `${path}/${cPath}/index`, meta: { title: cRoute.name, }, }; }) .filter(Boolean), }; } }); } catch (error) { console.error(error); } // 添加dashboard路由 routeList.unshift({ path: '/dashboard', name: 'Dashboard', redirect: '/dashboard/analysis', component: 'LAYOUT', meta: { title: 'routes.dashboard.dashboard', affix: true, icon: 'ant-design:home-outlined', }, children: [ { path: 'analysis', name: 'Analysis', component: '/dashboard/analysis/index', meta: { title: 'routes.dashboard.analysis', }, }, { path: 'workbench', name: 'Workbench', component: '/dashboard/workbench/index', meta: { title: 'routes.dashboard.workbench', }, }, ], }); ``` 路由权限控制和左侧菜单就已经实现了 ### 3. 按钮权限控制 ```html ```