From e072be8dcb0128b5cc9c9deed65d1312b3272e47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E4=B8=83=E5=B9=B4=E5=A4=8F?= <2098833867@qq.com> Date: Sun, 25 Jun 2023 13:40:51 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4use-permission=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E6=96=B9=E6=B3=95=EF=BC=8C=E7=A7=BB=E5=8A=A8MenuIcon?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sidebar => components}/MenuIcon.vue | 0 src/hooks/use-permission.ts | 152 +----------------- src/layout/app-main/component/Debugger.vue | 2 +- src/layout/sidebar/SidebarItem.vue | 2 +- src/permission.ts | 5 +- src/views/system/userManagement/index.vue | 2 +- src/views/user/profile/index.vue | 1 - 7 files changed, 13 insertions(+), 151 deletions(-) rename src/{layout/sidebar => components}/MenuIcon.vue (100%) diff --git a/src/layout/sidebar/MenuIcon.vue b/src/components/MenuIcon.vue similarity index 100% rename from src/layout/sidebar/MenuIcon.vue rename to src/components/MenuIcon.vue diff --git a/src/hooks/use-permission.ts b/src/hooks/use-permission.ts index 8bcf2d3..7989d25 100644 --- a/src/hooks/use-permission.ts +++ b/src/hooks/use-permission.ts @@ -1,154 +1,15 @@ import NProgress from 'nprogress' -import type { RouteRawConfig, RouterTypes, rawConfig } from '~/basic' import type { RouteRecordName } from 'vue-router' -/** - * 根据请求，过滤异步路由 - * @param:menuList 异步路由数组 - * return 过滤后的异步路由 - */ -// @ts-ignore import Layout from '@/layout/index.vue' -/* - * 路由操作 - * */ import router, { asyncRoutes, constantRoutes } from '@/router' -//进度条 import 'nprogress/nprogress.css' import { useBasicStore } from '@/store/basic' import { isArray } from 'xe-utils' -const buttonCodes: Array = [] //按钮权限 -interface menuRow { - category: number - code: number - children: RouterTypes -} -export const filterAsyncRoutesByMenuList = (menuList) => { - const filterRouter: RouterTypes = [] - menuList.forEach((route: menuRow) => { - //button permission - if (route.category === 3) { - buttonCodes.push(route.code) - } else { - //generator every router item by menuList - const itemFromReqRouter = getRouteItemFromReqRouter(route) - if (route.children?.length) { - //judge the type is router or button - itemFromReqRouter.children = filterAsyncRoutesByMenuList(route.children) - } - filterRouter.push(itemFromReqRouter) - } - }) - return filterRouter -} -const getRouteItemFromReqRouter = (route): RouteRawConfig => { - const tmp: rawConfig = { meta: { title: '' } } - const routeKeyArr = ['path', 'component', 'redirect', 'alwaysShow', 'name', 'hidden'] - const metaKeyArr = ['title', 'activeMenu', 'elSvgIcon', 'icon'] - // @ts-ignore - const modules = import.meta.glob('../views/**/**.vue') - //generator routeKey - routeKeyArr.forEach((fItem) => { - if (fItem === 'component') { - if (route[fItem] === 'Layout') { - tmp[fItem] = Layout - } else { - //has error , i will fix it through plugins - //tmp[fItem] = () => import(`@/views/permission-center/test/TestTableQuery.vue`) - tmp[fItem] = modules[`../views/${route[fItem]}`] - } - } else if (fItem === 'path' && route.parentId === 0) { - tmp[fItem] = `/${route[fItem]}` - } else if (['hidden', 'alwaysShow'].includes(fItem)) { - tmp[fItem] = !!route[fItem] - } else if (['name'].includes(fItem)) { - tmp[fItem] = route['code'] - } else if (route[fItem]) { - tmp[fItem] = route[fItem] - } - }) - //generator metaKey - metaKeyArr.forEach((fItem) => { - if (route[fItem] && tmp.meta) tmp.meta[fItem] = route[fItem] - }) - //route extra insert - if (route.extra) { - Object.entries(route.extra.parse(route.extra)).forEach(([key, value]) => { - if (key === 'meta' && tmp.meta) { - tmp.meta[key] = value - } else { - tmp[key] = value - } - }) - } - return tmp as RouteRawConfig -} - -/** - * 根据角色数组过滤异步路由 - * @param routes asyncRoutes 未过滤的异步路由 - * @param roles 角色数组 - * return 过滤后的异步路由 - */ -export function filterAsyncRoutesByRoles(routes, roles) { - const res: RouterTypes = [] - routes.forEach((route) => { - const tmp: RouteRawConfig = { ...route } - if (hasPermission(roles, tmp)) { - if (tmp.children) { - tmp.children = filterAsyncRoutesByRoles(tmp.children, roles) - } - res.push(tmp) - } - }) - return res -} -function hasPermission(roles, route) { - if (route?.meta?.roles) { - return roles?.some((role) => route.meta.roles.includes(role)) - } else { - return true - } -} - -/** - * 根据code数组，过滤异步路由 - * @param codes code数组 - * @param codesRoutes 未过滤的异步路由 - * return 过滤后的异步路由 - */ -export function filterAsyncRouterByCodes(codesRoutes, codes) { - const filterRouter: RouterTypes = [] - codesRoutes.forEach((routeItem: RouteRawConfig) => { - if (hasCodePermission(codes, routeItem)) { - if (routeItem.children) routeItem.children = filterAsyncRouterByCodes(routeItem.children, codes) - filterRouter.push(routeItem) - } - }) - return filterRouter -} -function hasCodePermission(codes, routeItem) { - if (routeItem.meta?.code) { - return codes.includes(routeItem.meta.code) || routeItem.hidden - } else { - return true - } -} -//过滤异步路由 -export function filterAsyncRouter({ menuList, roles, codes }: { menuList; roles?; codes? }) { +//从数据库设置文本路由 +export function setRouterFromDatabase(menuList) { const basicStore = useBasicStore() const accessRoutes = menuList - // 与项目兼容，移除权限筛选部分，这一部分在公司项目中为后端处理。 - - // let accessRoutes: RouterTypes = [] - // const permissionMode = basicStore.settings?.permissionMode - // if (permissionMode === 'rbac') { - // accessRoutes = filterAsyncRoutesByMenuList(menuList) //by menuList - // } else if (permissionMode === 'roles') { - // accessRoutes = filterAsyncRoutesByRoles(roleCodeRoutes, roles) //by roles - // } else { - // accessRoutes = filterAsyncRouterByCodes(roleCodeRoutes, codes) //by codes - // } // @ts-ignore const views = import.meta.glob('../views/**/*.vue') as Record Promise> @@ -164,7 +25,8 @@ export function filterAsyncRouter({ menuList, roles, codes }: { menuList; roles? item.component = async () => { let component try { - component = await views[url]() + component = await views[url]?.() + if (!component) throw new Error(`找不到文件${url}`) } catch (e) { console.error(e) component = await import('../views/error-page/404.vue') @@ -175,11 +37,13 @@ export function filterAsyncRouter({ menuList, roles, codes }: { menuList; roles? if (isArray(item.children)) scanRouter(item.children) } } + scanRouter(accessRoutes) accessRoutes.forEach((route) => router.addRoute(route)) asyncRoutes.forEach((item) => router.addRoute(item)) basicStore.setFilterAsyncRoutes(accessRoutes) } + //重置路由 export function resetRouter() { //移除之前存在的路由 @@ -191,6 +55,7 @@ export function resetRouter() { //新增constantRoutes constantRoutes.forEach((feItem) => router.addRoute(feItem)) } + //重置登录状态 export function resetState() { resetRouter() @@ -200,8 +65,7 @@ export function resetState() { //刷新路由 export function freshRouter(data) { resetRouter() - filterAsyncRouter(data) - // location.reload() + setRouterFromDatabase(data) } NProgress.configure({ showSpinner: false }) diff --git a/src/layout/app-main/component/Debugger.vue b/src/layout/app-main/component/Debugger.vue index 6494cab..cad4d3d 100644 --- a/src/layout/app-main/component/Debugger.vue +++ b/src/layout/app-main/component/Debugger.vue @@ -14,7 +14,7 @@