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,5 +1,4 @@
|
||||
import { EnumStorageKey } from '@/enum';
|
||||
import type { UserInfo } from '@/interface';
|
||||
import { setLocal, getLocal, removeLocal } from '../storage';
|
||||
|
||||
/** 设置token */
|
||||
@ -34,18 +33,20 @@ export function removeRefreshToken() {
|
||||
|
||||
/** 设置用户信息 */
|
||||
export function getUserInfo() {
|
||||
const emptyInfo: UserInfo = {
|
||||
const emptyInfo: Auth.UserInfo = {
|
||||
userId: '',
|
||||
userName: '',
|
||||
userPhone: ''
|
||||
};
|
||||
const userInfo: UserInfo = getLocal<UserInfo>(EnumStorageKey['user-info']) || emptyInfo;
|
||||
const userInfo: Auth.UserInfo = getLocal<Auth.UserInfo>(EnumStorageKey['user-info']) || emptyInfo;
|
||||
return userInfo;
|
||||
}
|
||||
|
||||
/** 获取用户信息 */
|
||||
export function setUserInfo(userInfo: UserInfo) {
|
||||
export function setUserInfo(userInfo: Auth.UserInfo) {
|
||||
setLocal(EnumStorageKey['user-info'], userInfo);
|
||||
}
|
||||
|
||||
/** 去除用户信息 */
|
||||
export function removeUserInfo() {
|
||||
removeLocal(EnumStorageKey['user-info']);
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
interface BrowserInfo {
|
||||
type: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
/** 获取浏览器版本信息 */
|
||||
export function getBrowserInfo() {
|
||||
const explorer = window.navigator.userAgent.toLowerCase();
|
||||
const info: BrowserInfo = {
|
||||
type: '',
|
||||
version: ''
|
||||
};
|
||||
function setInfo(data: BrowserInfo) {
|
||||
Object.assign(info, data);
|
||||
}
|
||||
// ie
|
||||
if (explorer.indexOf('msie') >= 0) {
|
||||
const [version] = explorer.match(/msie ([\d.]+)/) || [''];
|
||||
setInfo({ type: 'IE', version });
|
||||
}
|
||||
// firefox
|
||||
if (explorer.indexOf('firefox') >= 0) {
|
||||
const [version] = explorer.match(/firefox\/([\d.]+)/) || [''];
|
||||
setInfo({ type: 'Firefox', version });
|
||||
}
|
||||
// Chrome
|
||||
if (explorer.indexOf('chrome') >= 0) {
|
||||
const [version] = explorer.match(/chrome\/([\d.]+)/) || [''];
|
||||
setInfo({ type: 'Chrome', version });
|
||||
if (explorer.indexOf('qqbrowser') >= 0) {
|
||||
const [version] = explorer.match(/qqbrowser\/([\d.]+)/) || [''];
|
||||
setInfo({ type: 'QQ浏览器', version });
|
||||
}
|
||||
}
|
||||
// Opera
|
||||
if (explorer.indexOf('opera') >= 0) {
|
||||
const [version] = explorer.match(/opera.([\d.]+)/) || [''];
|
||||
setInfo({ type: 'Opera', version });
|
||||
}
|
||||
// Safari
|
||||
if (explorer.indexOf('Safari') >= 0) {
|
||||
const [version] = explorer.match(/version\/([\d.]+)/) || [''];
|
||||
setInfo({ type: 'Safari', version });
|
||||
}
|
||||
return info;
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
import chroma from 'chroma-js';
|
||||
|
||||
/**
|
||||
* 更亮的颜色
|
||||
* @param color - 颜色
|
||||
* @param deep - 效果层次
|
||||
*/
|
||||
export function brightenColor(color: string, deep: number = 0.5) {
|
||||
return chroma(color).brighten(deep).hex();
|
||||
}
|
||||
|
||||
/**
|
||||
* 更暗的颜色
|
||||
* @param color - 颜色
|
||||
* @param deep - 效果层次
|
||||
*/
|
||||
export function darkenColor(color: string, deep: number = 0.5) {
|
||||
return chroma(color).darken(deep).hex();
|
||||
}
|
||||
|
||||
/**
|
||||
* 给颜色加透明度
|
||||
* @param color - 颜色
|
||||
* @param alpha - 透明度
|
||||
*/
|
||||
export function addColorAlpha(color: string, alpha: number) {
|
||||
return chroma(color).alpha(alpha).hex();
|
||||
}
|
||||
|
||||
/**
|
||||
* 颜色混合
|
||||
* @param firstColor - 第一个颜色
|
||||
* @param secondColor - 第二个颜色
|
||||
* @param ratio - 第二个颜色占比
|
||||
*/
|
||||
export function mixColor(firstColor: string, secondColor: string, ratio: number) {
|
||||
return chroma.mix(firstColor, secondColor, ratio).hex();
|
||||
}
|
||||
10
src/utils/common/design-pattern.ts
Normal file
10
src/utils/common/design-pattern.ts
Normal file
@ -0,0 +1,10 @@
|
||||
/** 执行策略模式 */
|
||||
export function exeStrategyActions(actions: Common.StrategyAction[]) {
|
||||
actions.some(item => {
|
||||
const [flag, action] = item;
|
||||
if (flag) {
|
||||
action();
|
||||
}
|
||||
return flag;
|
||||
});
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { h } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
/**
|
||||
* 动态渲染iconify
|
||||
* @param icon - 图标名称
|
||||
* @param color - 图标颜色
|
||||
* @param size - 图标大小
|
||||
*/
|
||||
export function iconifyRender(icon: string, color?: string, size?: number) {
|
||||
const style: { color?: string; size?: string } = {};
|
||||
if (color) {
|
||||
style.color = color;
|
||||
}
|
||||
if (size) {
|
||||
style.size = `${size}px`;
|
||||
}
|
||||
return () => h(Icon, { icon, style });
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
export * from './typeof';
|
||||
export * from './color';
|
||||
export * from './icon';
|
||||
export * from './browser';
|
||||
export * from './console';
|
||||
export * from './number';
|
||||
export * from './design-pattern';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
/**
|
||||
* 获取指定整数范围内的随机整数
|
||||
* @param start - 开始范围
|
||||
* @param end - 结束范围
|
||||
*/
|
||||
export function getRandomInterger(end: number, start: number = 0) {
|
||||
const range = end - start;
|
||||
const random = Math.floor(Math.random() * range + start);
|
||||
return random;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './rule';
|
||||
@ -1,73 +0,0 @@
|
||||
import { Ref } from 'vue';
|
||||
import type { FormItemRule } from 'naive-ui';
|
||||
import { REGEXP_PHONE, REGEXP_PWD, REGEXP_CODE, REGEXP_EMAIL } from '@/config';
|
||||
|
||||
/** 表单规则 */
|
||||
interface CustomFormRules {
|
||||
/** 手机号码 */
|
||||
phone: FormItemRule[];
|
||||
/** 密码 */
|
||||
pwd: FormItemRule[];
|
||||
/** 验证码 */
|
||||
code: FormItemRule[];
|
||||
/** 邮箱 */
|
||||
email: FormItemRule[];
|
||||
}
|
||||
|
||||
/** 表单规则 */
|
||||
export const formRules: CustomFormRules = {
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号码' },
|
||||
{ pattern: REGEXP_PHONE, message: '手机号码格式错误', trigger: 'input' }
|
||||
],
|
||||
pwd: [
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ pattern: REGEXP_PWD, message: '密码为8-18位数字/字符/符号，至少2种组合', trigger: 'input' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码' },
|
||||
{ pattern: REGEXP_CODE, message: '验证码格式错误', trigger: 'input' }
|
||||
],
|
||||
email: [{ pattern: REGEXP_EMAIL, message: '邮箱格式错误', trigger: 'blur' }]
|
||||
};
|
||||
|
||||
/** 是否为空字符串 */
|
||||
function isBlankString(str: string) {
|
||||
return str.trim() === '';
|
||||
}
|
||||
|
||||
/** 获取确认密码的表单规则 */
|
||||
export function getConfirmPwdRule(pwd: Ref<string>) {
|
||||
const confirmPwdRule: FormItemRule[] = [
|
||||
{ required: true, message: '请输入确认密码' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (!isBlankString(value) && value !== pwd.value) {
|
||||
return Promise.reject(rule.message);
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
message: '输入的值与密码不一致',
|
||||
trigger: 'input'
|
||||
}
|
||||
];
|
||||
return confirmPwdRule;
|
||||
}
|
||||
|
||||
/** 获取图片验证码的表单规则 */
|
||||
export function getImgCodeRule(imgCode: Ref<string>) {
|
||||
const imgCodeRule: FormItemRule[] = [
|
||||
{ required: true, message: '请输入验证码' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (!isBlankString(value) && value !== imgCode.value) {
|
||||
return Promise.reject(rule.message);
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
message: '验证码不正确',
|
||||
trigger: 'blur'
|
||||
}
|
||||
];
|
||||
return imgCodeRule;
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
export * from './common';
|
||||
export * from './storage';
|
||||
export * from './router';
|
||||
export * from './service';
|
||||
export * from './form';
|
||||
export * from './package';
|
||||
export * from './auth';
|
||||
export * from './router';
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
import type { VersionInfo } from '@/interface';
|
||||
import packageJSON from '../../../package.json';
|
||||
|
||||
interface Package {
|
||||
name: string;
|
||||
version: string;
|
||||
dependencies: {
|
||||
[key: string]: string;
|
||||
};
|
||||
devDependencies: {
|
||||
[key: string]: string;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface PackageJson {
|
||||
name: string;
|
||||
version: string;
|
||||
dependencies: VersionInfo[];
|
||||
devDependencies: VersionInfo[];
|
||||
}
|
||||
|
||||
const packageWithType = packageJSON as Package;
|
||||
|
||||
function transformVersionData(tuple: [string, string]): VersionInfo {
|
||||
const [name, version] = tuple;
|
||||
return {
|
||||
name,
|
||||
version
|
||||
};
|
||||
}
|
||||
|
||||
export const packageJson: PackageJson = {
|
||||
name: packageWithType.name,
|
||||
version: packageWithType.version,
|
||||
dependencies: Object.entries(packageWithType.dependencies).map(item => transformVersionData(item)),
|
||||
devDependencies: Object.entries(packageWithType.devDependencies).map(item => transformVersionData(item))
|
||||
};
|
||||
@ -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([]);
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import type { AxiosError, AxiosResponse } from 'axios';
|
||||
import type { RequestServiceError, BackendServiceResult } from '@/interface';
|
||||
import {
|
||||
DEFAULT_REQUEST_ERROR_CODE,
|
||||
DEFAULT_REQUEST_ERROR_MSG,
|
||||
@ -9,33 +8,49 @@ import {
|
||||
REQUEST_TIMEOUT_MSG,
|
||||
ERROR_STATUS
|
||||
} from '@/config';
|
||||
import { exeStrategyActions } from '../common';
|
||||
import { showErrorMsg } from './msg';
|
||||
|
||||
type ErrorStatus = keyof typeof ERROR_STATUS;
|
||||
|
||||
/**
|
||||
* 处理请求失败的错误
|
||||
* 处理axios请求失败的错误
|
||||
* @param error - 错误
|
||||
*/
|
||||
export function handleAxiosError(axiosError: AxiosError) {
|
||||
const error: RequestServiceError = {
|
||||
const error: Service.RequestError = {
|
||||
type: 'axios',
|
||||
code: DEFAULT_REQUEST_ERROR_CODE,
|
||||
msg: DEFAULT_REQUEST_ERROR_MSG
|
||||
};
|
||||
|
||||
if (!window.navigator.onLine || axiosError.message === 'Network Error') {
|
||||
// 网路错误
|
||||
Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG });
|
||||
} else if (axiosError.code === REQUEST_TIMEOUT_CODE && axiosError.message.includes('timeout')) {
|
||||
/** 超时错误 */
|
||||
Object.assign(error, { code: REQUEST_TIMEOUT_CODE, msg: REQUEST_TIMEOUT_MSG });
|
||||
} else if (axiosError.response) {
|
||||
// 请求不成功的错误
|
||||
const errorCode: ErrorStatus = axiosError.response.status as ErrorStatus;
|
||||
const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG;
|
||||
Object.assign(error, { code: errorCode || DEFAULT_REQUEST_ERROR_CODE, msg });
|
||||
}
|
||||
const actions: Common.StrategyAction[] = [
|
||||
[
|
||||
// 网路错误
|
||||
!window.navigator.onLine || axiosError.message === 'Network Error',
|
||||
() => {
|
||||
Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG });
|
||||
}
|
||||
],
|
||||
[
|
||||
// 超时错误
|
||||
axiosError.code === REQUEST_TIMEOUT_CODE && axiosError.message.includes('timeout'),
|
||||
() => {
|
||||
Object.assign(error, { code: REQUEST_TIMEOUT_CODE, msg: REQUEST_TIMEOUT_MSG });
|
||||
}
|
||||
],
|
||||
[
|
||||
// 请求不成功的错误
|
||||
Boolean(axiosError.response),
|
||||
() => {
|
||||
const errorCode: ErrorStatus = (axiosError.response?.status as ErrorStatus) || 'DEFAULT';
|
||||
const msg = ERROR_STATUS[errorCode];
|
||||
Object.assign(error, { code: errorCode, msg });
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
exeStrategyActions(actions);
|
||||
|
||||
showErrorMsg(error);
|
||||
|
||||
@ -47,7 +62,7 @@ export function handleAxiosError(axiosError: AxiosError) {
|
||||
* @param response - 请求的响应
|
||||
*/
|
||||
export function handleResponseError(response: AxiosResponse) {
|
||||
const error: RequestServiceError = {
|
||||
const error: Service.RequestError = {
|
||||
type: 'axios',
|
||||
code: DEFAULT_REQUEST_ERROR_CODE,
|
||||
msg: DEFAULT_REQUEST_ERROR_MSG
|
||||
@ -69,11 +84,11 @@ export function handleResponseError(response: AxiosResponse) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理后端返回的错误
|
||||
* 处理后端返回的错误(业务错误)
|
||||
* @param backendResult - 后端接口的响应数据
|
||||
*/
|
||||
export function handleBackendError(backendResult: BackendServiceResult) {
|
||||
const error: RequestServiceError = {
|
||||
export function handleBackendError(backendResult: Service.BackendServiceResult) {
|
||||
const error: Service.RequestError = {
|
||||
type: 'backend',
|
||||
code: backendResult.code,
|
||||
msg: backendResult.message
|
||||
|
||||
@ -1,27 +1,15 @@
|
||||
import { CustomRequestResult, CustomSuccessRequestResult, CustomFailRequestResult } from '@/interface';
|
||||
|
||||
type ResultHandler<T> = (...arg: any) => T;
|
||||
/**
|
||||
* 对请求的结果数据进行格式化的处理
|
||||
* @param resultHandler - 处理函数
|
||||
* @param requests - 请求结果
|
||||
*/
|
||||
export function requestMiddleware<MiddlewareData>(
|
||||
resultHandler: ResultHandler<MiddlewareData>,
|
||||
requests: CustomRequestResult<any>[]
|
||||
) {
|
||||
const errorIndex = requests.findIndex(item => item.error !== null);
|
||||
const hasError = errorIndex > -1;
|
||||
if (hasError) {
|
||||
const failResult: CustomFailRequestResult = {
|
||||
data: null,
|
||||
error: requests[errorIndex].error!
|
||||
/** 统一失败和成功的请求结果的数据类型 */
|
||||
export async function handleServiceResult<T = any>(error: Service.RequestError | null, data: any) {
|
||||
if (error) {
|
||||
const fail: Service.FailedResult = {
|
||||
error,
|
||||
data: null
|
||||
};
|
||||
return failResult;
|
||||
return fail;
|
||||
}
|
||||
const successResult: CustomSuccessRequestResult<MiddlewareData> = {
|
||||
data: resultHandler(...requests.map(item => item.data)),
|
||||
error: null
|
||||
const success: Service.SuccessResult<T> = {
|
||||
error: null,
|
||||
data
|
||||
};
|
||||
return successResult;
|
||||
return success;
|
||||
}
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import type { RequestServiceError } from '@/interface';
|
||||
import { NO_ERROR_MSG_CODE, ERROR_MSG_DURATION } from '@/config';
|
||||
import { consoleWarn } from '../common';
|
||||
|
||||
/** 错误消息栈，防止同一错误同时出现 */
|
||||
const errorMsgStack = new Map<string | number, string>([]);
|
||||
|
||||
function addErrorMsg(error: RequestServiceError) {
|
||||
function addErrorMsg(error: Service.RequestError) {
|
||||
errorMsgStack.set(error.code, error.msg);
|
||||
}
|
||||
function removeErrorMsg(error: RequestServiceError) {
|
||||
function removeErrorMsg(error: Service.RequestError) {
|
||||
errorMsgStack.delete(error.code);
|
||||
}
|
||||
function hasErrorMsg(error: RequestServiceError) {
|
||||
function hasErrorMsg(error: Service.RequestError) {
|
||||
return errorMsgStack.has(error.code);
|
||||
}
|
||||
|
||||
@ -18,11 +18,12 @@ function hasErrorMsg(error: RequestServiceError) {
|
||||
* 显示错误信息
|
||||
* @param error
|
||||
*/
|
||||
export function showErrorMsg(error: RequestServiceError) {
|
||||
export function showErrorMsg(error: Service.RequestError) {
|
||||
if (!error.msg) return;
|
||||
if (!NO_ERROR_MSG_CODE.includes(error.code)) {
|
||||
if (!hasErrorMsg(error)) {
|
||||
addErrorMsg(error);
|
||||
consoleWarn(error.code, error.msg);
|
||||
window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION });
|
||||
setTimeout(() => {
|
||||
removeErrorMsg(error);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import qs from 'qs';
|
||||
import FormData from 'form-data';
|
||||
import { isArray } from '@/utils';
|
||||
import { ContentType } from '@/enum';
|
||||
import { isArray } from '../common';
|
||||
|
||||
/**
|
||||
* 请求数据的转换
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export { setLocal, getLocal, removeLocal, clearLocal } from './local';
|
||||
export { setSession, getSession, removeSession, clearSession } from './session';
|
||||
export * from './local';
|
||||
export * from './session';
|
||||
|
||||
Reference in New Issue
Block a user