mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
refactor(projects): 精简版+动态路由权限初步
This commit is contained in:
Soybean
@ -1,44 +0,0 @@
|
||||
import type { Component } from 'vue';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
/** 给需要缓存的页面组件设置名称 */
|
||||
function setComponentName(component?: Component, name?: string) {
|
||||
if (component && name) {
|
||||
Object.assign(component, { name });
|
||||
}
|
||||
}
|
||||
|
||||
function getCacheName(route: RouteRecordRaw, isCache: boolean) {
|
||||
const cacheNames: string[] = [];
|
||||
const hasChild = hasChildren(route);
|
||||
if (isCache && !hasChild) {
|
||||
const name = route.name as string;
|
||||
setComponentName(route.component, name);
|
||||
cacheNames.push(name);
|
||||
}
|
||||
if (hasChild) {
|
||||
const children = route.children as RouteRecordRaw[];
|
||||
children.forEach(item => {
|
||||
const isChildCache = isCache || isKeepAlive(item);
|
||||
cacheNames.push(...getCacheName(item, isChildCache));
|
||||
});
|
||||
}
|
||||
return cacheNames;
|
||||
}
|
||||
|
||||
function isKeepAlive(route: RouteRecordRaw) {
|
||||
return Boolean(route?.meta?.keepAlive);
|
||||
}
|
||||
function hasChildren(route: RouteRecordRaw) {
|
||||
return Boolean(route.children && route.children.length);
|
||||
}
|
||||
|
||||
/** 获取被缓存的路由 */
|
||||
export function getCacheRoutes(routes: RouteRecordRaw[]) {
|
||||
const cacheNames: string[] = [];
|
||||
routes.forEach(route => {
|
||||
const isCache = isKeepAlive(route);
|
||||
cacheNames.push(...getCacheName(route, isCache));
|
||||
});
|
||||
return cacheNames;
|
||||
}
|
||||
58
src/utils/router/component.ts
Normal file
58
src/utils/router/component.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import type { Component } from 'vue';
|
||||
import {
|
||||
Login,
|
||||
NoPermission,
|
||||
NotFound,
|
||||
ServiceError,
|
||||
DashboardAnalysis,
|
||||
DashboardWorkbench,
|
||||
About,
|
||||
MultiMenuFirstSecond
|
||||
} from '@/views';
|
||||
|
||||
/** 需要用到自身vue组件的页面 */
|
||||
type ViewComponentKey = Exclude<AuthRoute.RouteKey, 'root' | 'dashboard' | 'multi-menu' | 'multi-menu_first'>;
|
||||
|
||||
type ViewComponent = {
|
||||
[key in ViewComponentKey]: () => Promise<Component>;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取页面导入的vue文件(懒加载的方式)
|
||||
*/
|
||||
export function getViewComponent(routeKey: AuthRoute.RouteKey) {
|
||||
const keys: ViewComponentKey[] = [
|
||||
'login',
|
||||
'no-permission',
|
||||
'not-found',
|
||||
'service-error',
|
||||
'dashboard_analysis',
|
||||
'dashboard_workbench',
|
||||
'about',
|
||||
'multi-menu_first_second',
|
||||
'redirect-not-found'
|
||||
];
|
||||
|
||||
const key = keys.includes(routeKey as ViewComponentKey) ? (routeKey as ViewComponentKey) : 'not-found';
|
||||
|
||||
const viewComponent: ViewComponent = {
|
||||
login: Login,
|
||||
'no-permission': NoPermission,
|
||||
'not-found': NotFound,
|
||||
'service-error': ServiceError,
|
||||
dashboard_analysis: DashboardAnalysis,
|
||||
dashboard_workbench: DashboardWorkbench,
|
||||
about: About,
|
||||
'multi-menu_first_second': MultiMenuFirstSecond,
|
||||
'redirect-not-found': NotFound
|
||||
};
|
||||
|
||||
return () => setViewComponentName(viewComponent[key], key);
|
||||
}
|
||||
|
||||
/** 给页面组件设置名称 */
|
||||
async function setViewComponentName(asyncComponent: () => Promise<Component>, name: string) {
|
||||
const component = (await asyncComponent()) as { default: Component };
|
||||
Object.assign(component.default, { name });
|
||||
return component;
|
||||
}
|
||||
@ -1,115 +1,121 @@
|
||||
import type { Component } from 'vue';
|
||||
import type { Router, RouteRecordRaw, RouteMeta } from 'vue-router';
|
||||
import type { ImportedRouteModules, LoginModuleType } from '@/interface';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { Layout } from '@/layouts';
|
||||
import { consoleError } from '../common';
|
||||
import { getViewComponent } from './component';
|
||||
|
||||
interface SingleRouteConfig {
|
||||
/** 路由 */
|
||||
route: RouteRecordRaw;
|
||||
/** 路由容器 */
|
||||
container: Component;
|
||||
/** 路由容器的描述 */
|
||||
containerMeta: RouteMeta;
|
||||
/** 404路由的名称 */
|
||||
notFoundName: string;
|
||||
}
|
||||
type ComponentAction = {
|
||||
[key in AuthRoute.RouteComponent]: () => void;
|
||||
};
|
||||
|
||||
/** 设置单个路由 */
|
||||
export function setSingleRoute(config: SingleRouteConfig) {
|
||||
const { route, container, containerMeta, notFoundName } = config;
|
||||
const routeItem: RouteRecordRaw = {
|
||||
name: `${route.name as string}_`,
|
||||
path: `${route.path}_`,
|
||||
component: container,
|
||||
redirect: { name: notFoundName },
|
||||
meta: {
|
||||
notAsMenu: true,
|
||||
...containerMeta,
|
||||
title: `${containerMeta.title}-container`
|
||||
},
|
||||
children: [route]
|
||||
/** 将权限路由类型转换成vue路由类型 */
|
||||
export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
|
||||
const { name, path } = item;
|
||||
const itemRoute: Partial<RouteRecordRaw> = {
|
||||
name,
|
||||
path,
|
||||
meta: item.meta
|
||||
};
|
||||
if (hasRedirect(item)) {
|
||||
itemRoute.redirect = item.redirect;
|
||||
}
|
||||
if (hasComponent(item)) {
|
||||
const action: ComponentAction = {
|
||||
layout() {
|
||||
itemRoute.component = Layout;
|
||||
},
|
||||
blank() {
|
||||
itemRoute.component = Layout;
|
||||
if (itemRoute.meta) {
|
||||
itemRoute.meta.blankLayout = true;
|
||||
}
|
||||
},
|
||||
multi() {},
|
||||
self() {
|
||||
itemRoute.component = getViewComponent(item.name);
|
||||
}
|
||||
};
|
||||
try {
|
||||
action[item.component!]();
|
||||
} catch {
|
||||
consoleError('路由组件解析失败: ', item);
|
||||
}
|
||||
}
|
||||
if (isSingleRoute(item)) {
|
||||
itemRoute.children = [
|
||||
{
|
||||
path: '',
|
||||
component: getViewComponent(item.name)
|
||||
}
|
||||
];
|
||||
} else if (hasChildren(item)) {
|
||||
itemRoute.children = item.children!.map(child => transformAuthRouteToVueRoute(child));
|
||||
}
|
||||
|
||||
return routeItem;
|
||||
return itemRoute as RouteRecordRaw;
|
||||
}
|
||||
|
||||
/** 处理导入的路由模块 */
|
||||
export function transformRouteModules(routeModules: ImportedRouteModules) {
|
||||
const modules = Object.keys(routeModules).map(key => {
|
||||
return routeModules[key].default;
|
||||
});
|
||||
const constantRoutes: RouteRecordRaw[] = modules.sort(
|
||||
(next, pre) => Number(next.meta?.order) - Number(pre.meta?.order)
|
||||
);
|
||||
return constantRoutes;
|
||||
function hasComponent(item: AuthRoute.Route) {
|
||||
return Boolean(item.component);
|
||||
}
|
||||
|
||||
function hasRedirect(item: AuthRoute.Route) {
|
||||
return Boolean(item.redirect);
|
||||
}
|
||||
|
||||
function hasChildren(item: AuthRoute.Route) {
|
||||
return Boolean(item.children && item.children.length);
|
||||
}
|
||||
|
||||
function isSingleRoute(item: AuthRoute.Route) {
|
||||
return Boolean(item.meta.single);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取路由的首页
|
||||
* 根据路由key获取AuthRoute数据
|
||||
* @param key - 路由key
|
||||
* @param routes - 路由
|
||||
* @param routeHomeName - 路由首页名称
|
||||
*/
|
||||
export function getRouteHome(routes: RouteRecordRaw[], routeHomeName: string) {
|
||||
let routeHome: RouteRecordRaw;
|
||||
function hasChildren(route: RouteRecordRaw) {
|
||||
return Boolean(route.children && route.children.length);
|
||||
export function findAuthRouteByKey(key: AuthRoute.RouteKey, routes: AuthRoute.Route[]) {
|
||||
const paths = getRouteKeyPathsByKey(key);
|
||||
const route = recursiveFindRouteByPaths(paths, routes);
|
||||
|
||||
return route;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路由key的paths获递归取路由
|
||||
* @param paths - 路由key的路径
|
||||
* @param routes - 路由
|
||||
*/
|
||||
function recursiveFindRouteByPaths(
|
||||
paths: AuthRoute.RouteKey[],
|
||||
routes: AuthRoute.Route[]
|
||||
): AuthRoute.Route | undefined {
|
||||
const item = routes.find(route => paths.length && route.name === paths[0]);
|
||||
|
||||
if (item && hasComponent(item)) {
|
||||
return recursiveFindRouteByPaths(paths.slice(1), item.children!);
|
||||
}
|
||||
function getRouteHomeByRoute(route: RouteRecordRaw) {
|
||||
if (routeHome) return;
|
||||
const hasChild = hasChildren(route);
|
||||
if (!hasChild) {
|
||||
if (route.name === routeHomeName) {
|
||||
routeHome = route;
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路由key获取从第一级路由到当前路由key的paths
|
||||
* @param key - 路由key
|
||||
*/
|
||||
function getRouteKeyPathsByKey(key: AuthRoute.RouteKey) {
|
||||
const splitMark: AuthRoute.RouteSplitMark = '_';
|
||||
const keys = key.split(splitMark);
|
||||
const keyPaths: AuthRoute.RouteKey[] = [];
|
||||
|
||||
keys.forEach((itemKey, index) => {
|
||||
if (index === 0) {
|
||||
keyPaths.push(itemKey as AuthRoute.RouteKey);
|
||||
} else {
|
||||
getRouteHomeByRoutes(route.children as RouteRecordRaw[]);
|
||||
const concatKey = keyPaths[index - 1] + splitMark + itemKey;
|
||||
keyPaths.push(concatKey as AuthRoute.RouteKey);
|
||||
}
|
||||
}
|
||||
function getRouteHomeByRoutes(_routes: RouteRecordRaw[]) {
|
||||
_routes.some(item => {
|
||||
getRouteHomeByRoute(item as RouteRecordRaw);
|
||||
return routeHome !== undefined;
|
||||
});
|
||||
}
|
||||
getRouteHomeByRoutes(routes);
|
||||
return routeHome!;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将多层级路由转换成二级路由
|
||||
* @param routes - 路由
|
||||
*/
|
||||
export function transformMultiDegreeRoutes(routes: RouteRecordRaw[]) {
|
||||
function hasComponent(route: RouteRecordRaw) {
|
||||
return Boolean(route.component);
|
||||
}
|
||||
function hasChildren(route: RouteRecordRaw) {
|
||||
return Boolean(route.children && route.children.length);
|
||||
}
|
||||
|
||||
function upDimension(route: RouteRecordRaw): RouteRecordRaw[] {
|
||||
if (hasChildren(route)) {
|
||||
const updateRoute = { ...route };
|
||||
if (!hasComponent(route)) {
|
||||
return updateRoute.children!;
|
||||
}
|
||||
updateRoute.children = updateRoute.children?.map(item => upDimension(item)).flat();
|
||||
return [updateRoute];
|
||||
}
|
||||
return [route];
|
||||
}
|
||||
|
||||
return routes.map(item => upDimension(item)).flat();
|
||||
}
|
||||
|
||||
/** 获取登录后的重定向地址 */
|
||||
export function getLoginRedirectUrl(router: Router) {
|
||||
const path = router.currentRoute.value.fullPath as string;
|
||||
const redirectUrl = path === '/' ? undefined : path;
|
||||
return redirectUrl;
|
||||
}
|
||||
|
||||
/** 获取登录模块的正则字符串 */
|
||||
export function getLoginModuleRegExp() {
|
||||
const modules: LoginModuleType[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
|
||||
return modules.join('|');
|
||||
});
|
||||
|
||||
return keyPaths;
|
||||
}
|
||||
|
||||
@ -1,4 +1 @@
|
||||
export * from './helpers';
|
||||
export * from './cache';
|
||||
export * from './menus';
|
||||
export * from './tab';
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import type { GlobalMenuOption } from '@/interface';
|
||||
import { iconifyRender } from '../common';
|
||||
|
||||
/** 判断路由是否作为菜单 */
|
||||
function asMenu(route: RouteRecordRaw) {
|
||||
return !route.meta?.notAsMenu;
|
||||
}
|
||||
|
||||
/** 给菜单添加可选属性 */
|
||||
function addPartialProps(menuItem: GlobalMenuOption, icon?: string, children?: GlobalMenuOption[]) {
|
||||
const item = { ...menuItem };
|
||||
if (icon) {
|
||||
Object.assign(item, { icon: iconifyRender(icon) });
|
||||
}
|
||||
if (children) {
|
||||
Object.assign(item, { children });
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
||||
/** 将路由转换成菜单 */
|
||||
export function transformRouteToMenu(routes: RouteRecordRaw[]) {
|
||||
const globalMenu: GlobalMenuOption[] = [];
|
||||
routes.forEach(route => {
|
||||
const { name, path, meta } = route;
|
||||
const routeName = name as string;
|
||||
let menuChildren: GlobalMenuOption[] | undefined;
|
||||
if (route.children) {
|
||||
menuChildren = transformRouteToMenu(route.children as RouteRecordRaw[]);
|
||||
}
|
||||
const menuItem: GlobalMenuOption = addPartialProps(
|
||||
{
|
||||
key: routeName,
|
||||
label: meta?.title ?? routeName,
|
||||
routeName,
|
||||
routePath: path
|
||||
},
|
||||
meta?.icon,
|
||||
menuChildren
|
||||
);
|
||||
if (asMenu(route)) {
|
||||
globalMenu.push(menuItem);
|
||||
} else if (menuChildren) {
|
||||
globalMenu.push(...menuChildren);
|
||||
}
|
||||
});
|
||||
return globalMenu;
|
||||
}
|
||||
|
||||
/** 将路由转换成菜单列表 */
|
||||
export function transformRouteToList(routes: RouteRecordRaw[], treeMap: RouteRecordRaw[] = []) {
|
||||
if (routes && routes.length === 0) return [];
|
||||
return routes.reduce((acc, cur) => {
|
||||
if (!cur.meta?.notAsMenu) {
|
||||
acc.push(cur);
|
||||
}
|
||||
if (cur.children && cur.children.length > 0) {
|
||||
transformRouteToList(cur.children, treeMap);
|
||||
}
|
||||
return acc;
|
||||
}, treeMap);
|
||||
}
|
||||
|
||||
/** 判断路由是否为Url链接 */
|
||||
export function isUrl(path: string): boolean {
|
||||
const reg =
|
||||
/(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
|
||||
return reg.test(path);
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
import { EnumStorageKey } from '@/enum';
|
||||
import type { MultiTabRoute } from '@/interface';
|
||||
import { setLocal, getLocal } from '../storage';
|
||||
|
||||
/** 缓存多页签数据 */
|
||||
export function setTabRouteStorage(data: MultiTabRoute[]) {
|
||||
setLocal(EnumStorageKey['tab-route'], data);
|
||||
}
|
||||
|
||||
/** 获取缓存的多页签数据 */
|
||||
export function getTabRouteStorage() {
|
||||
const routes: MultiTabRoute[] = [];
|
||||
const data = getLocal<MultiTabRoute[]>(EnumStorageKey['tab-route']);
|
||||
if (data) {
|
||||
routes.push(...data);
|
||||
}
|
||||
return routes;
|
||||
}
|
||||
|
||||
/** 清空多页签数据 */
|
||||
export function clearTabRoutes() {
|
||||
setTabRouteStorage([]);
|
||||
}
|
||||
Reference in New Issue
Block a user