64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import type { RouteRecordRaw } from 'vue-router';
|
||
|
||
import { filterTree, mapTree } from '@vben-core/toolkit';
|
||
/**
|
||
* 动态生成路由 - 前端方式
|
||
*/
|
||
async function generateRoutesByFrontend(
|
||
routes: RouteRecordRaw[],
|
||
roles: string[],
|
||
forbiddenComponent?: RouteRecordRaw['component'],
|
||
): Promise<RouteRecordRaw[]> {
|
||
// 根据角色标识过滤路由表,判断当前用户是否拥有指定权限
|
||
const finalRoutes = filterTree(routes, (route) => {
|
||
return hasVisible(route) && hasAuthority(route, roles);
|
||
});
|
||
|
||
if (!forbiddenComponent) {
|
||
return finalRoutes;
|
||
}
|
||
|
||
// 如果有禁止访问的页面，将禁止访问的页面替换为403页面
|
||
return mapTree(finalRoutes, (route) => {
|
||
if (menuHasVisibleWithForbidden(route)) {
|
||
route.component = forbiddenComponent;
|
||
}
|
||
return route;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 判断路由是否有权限访问
|
||
* @param route
|
||
* @param access
|
||
*/
|
||
function hasAuthority(route: RouteRecordRaw, access: string[]) {
|
||
const authority = route.meta?.authority;
|
||
|
||
if (!authority) {
|
||
return true;
|
||
}
|
||
return (
|
||
access.some((value) => authority.includes(value)) ||
|
||
menuHasVisibleWithForbidden(route)
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 判断路由是否需要在菜单中显示
|
||
* @param route
|
||
*/
|
||
function hasVisible(route?: RouteRecordRaw) {
|
||
return !route?.meta?.hideInMenu;
|
||
}
|
||
|
||
/**
|
||
* 判断路由是否在菜单中显示，但是访问会被重定向到403
|
||
* @param route
|
||
*/
|
||
function menuHasVisibleWithForbidden(route: RouteRecordRaw) {
|
||
return !!route.meta?.menuVisibleWithForbidden;
|
||
}
|
||
|
||
export { generateRoutesByFrontend, hasAuthority, hasVisible };
|