mayfly-go/mayfly_go_web/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { getSession, clearSession } from '@/common/utils/storage';
import { templateResolve } from '@/common/utils/string'
import { NextLoading } from '@/common/utils/loading';
import { dynamicRoutes, staticRoutes, pathMatch } from './route'
import openApi from '@/common/openApi';
import sockets from '@/common/sockets';
import pinia from '@/store/index';
import { useThemeConfig } from '@/store/themeConfig';
import { useUserInfo } from '@/store/userInfo';
import { useRoutesList } from '@/store/routesList';
import { useKeepALiveNames } from '@/store/keepAliveNames';

/**
 * 获取目录下的 .vue、.tsx 全部文件
 * @method import.meta.glob
 * @link 参考：https://cn.vitejs.dev/guide/features.html#json
 */
const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...viewsModules });

// 添加静态路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: staticRoutes,
});

// 前端控制路由：初始化方法，防止刷新时丢失
export function initAllFun() {
    NextLoading.start(); // 界面 loading 动画开始执行
    const token = getSession('token'); // 获取浏览器缓存 token 值
    if (!token) {
        // 无 token 停止执行下一步
        return false
    }
    useUserInfo().setUserInfo({});
    router.addRoute(pathMatch); // 添加404界面
    resetRoute(); // 删除/重置路由
    // 添加动态路由
    setFilterRouteEnd().forEach((route: any) => {
        router.addRoute((route as unknown) as RouteRecordRaw);
    });
    // 过滤权限菜单
    useRoutesList().setRoutesList(setFilterMenuFun(dynamicRoutes[0].children, useUserInfo().userInfo.menus))
}

// 后端控制路由：模拟执行路由数据初始化
export function initBackEndControlRoutesFun() {
    NextLoading.start(); // 界面 loading 动画开始执行
    const token = getSession('token'); // 获取浏览器缓存 token 值
    if (!token) {
        // 无 token 停止执行下一步
        return false
    }
    useUserInfo().setUserInfo({});
    let menuRoute = getSession('menus')
    if (!menuRoute) {
        menuRoute = getBackEndControlRoutes(); // 获取路由
        // const oldRoutes = res; // 获取接口原始路由（未处理component）
    }
    dynamicRoutes[0].children = backEndRouterConverter(menuRoute); // 处理路由（component）
    // 添加404界面
    router.addRoute(pathMatch);
    resetRoute(); // 删除/重置路由
    // 添加动态路由
    formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).forEach((route: any) => {
        router.addRoute((route as unknown) as RouteRecordRaw);
    });
    useRoutesList().setRoutesList(dynamicRoutes[0].children)
}

// 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
export function getBackEndControlRoutes() {
    return openApi.getMenuRoute({});
}

// 后端控制路由，后端返回路由 转换为vue route
export function backEndRouterConverter(routes: any, parentPath: string = "/") {
    if (!routes) return;
    return routes.map((item: any) => {
        if (!item.meta) {
            return item
        }
        // 将json字符串的meta转为对象
        item.meta = JSON.parse(item.meta)
        // 将meta.comoponet 解析为route.component
        if (item.meta.component) {
            item.component = dynamicImport(dynamicViewsModules, item.meta.component)
            delete item.meta['component']
        }
        // route.path == resource.code
        let path = item.code
        // 如果不是以 / 开头，则路径需要拼接父路径
        if (!path.startsWith("/")) {
            path = parentPath + "/" + path;
        }
        item.path = path
        delete item['code']

        // route.meta.title == resource.name
        item.meta.title = item.name
        delete item['name']

        // route.name == resource.meta.routeName
        item.name = item.meta.routeName
        delete item.meta['routeName']

        // route.redirect == resource.meta.redirect
        if (item.meta.redirect) {
            item.redirect = item.meta.redirect
            delete item.meta['redirect']
        }
        item.children && backEndRouterConverter(item.children, item.path);
        return item;
    });
}

/**
 * 后端路由 component 转换函数
 * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
 * @param component 当前要处理项 component
 * @returns 返回处理成函数后的 component
 */
export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
	const keys = Object.keys(dynamicViewsModules);
	const matchKeys = keys.filter((key) => {
		const k = key.replace(/..\/views|../, '');
		return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
	});
	if (matchKeys?.length === 1) {
		const matchKey = matchKeys[0];
		return dynamicViewsModules[matchKey];
	}
	if (matchKeys?.length > 1) {
		return false;
	}
}

// 多级嵌套数组处理成一维数组
export function formatFlatteningRoutes(arr: any) {
    if (arr.length <= 0) return false;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].children) {
            arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
        }
    }
    return arr;
}

// 多级嵌套数组处理后的一维数组，再处理成 `定义动态路由` 的格式
// 只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存
// isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
export function formatTwoStageRoutes(arr: any) {
    if (arr.length <= 0) return false;
    const newArr: any = [];
    const cacheList: Array<string> = [];
    arr.forEach((v: any) => {
        if (v.path === '/') {
            newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
        } else {
            newArr[0].children.push({ ...v });
            if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
                cacheList.push(v.name);
            }
        }
    });
    useKeepALiveNames().setCacheKeepAlive(cacheList);
    // store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
    return newArr;
}

// 判断路由code 是否包含当前登录用户menus字段中，menus为字符串code数组
export function hasAnth(menus: any, route: any) {
    if (route.meta && route.meta.code) {
        return menus.includes(route.meta.code)
    }
    return true
}

// 递归过滤有权限的路由
export function setFilterMenuFun(routes: any, menus: any) {
    const menu: any = [];
    routes.forEach((route: any) => {
        const item = { ...route };
        if (hasAnth(menus, item)) {
            if (item.children) {
                item.children = setFilterMenuFun(item.children, menus)
            }
            menu.push(item);
        }
    });
    return menu;
}

// 获取当前用户的权限去比对路由表，用于动态路由的添加
export function setFilterRoute(chil: any) {
    let filterRoute: any = [];
    chil.forEach((route: any) => {
        // 如果路由需要拥有指定code才可访问，则校验该用户菜单是否存在该code
        if (route.meta.code) {
            useUserInfo().userInfo.menus.forEach((m: any) => {
                if (route.meta.code == m) {
                    filterRoute.push({ ...route })
                }
            })
        } else {
            filterRoute.push({ ...route })
        }
    });
    return filterRoute;
}

// 比对后的路由表，进行重新赋值
export function setFilterRouteEnd() {
    let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
    filterRouteEnd[0].children = setFilterRoute(filterRouteEnd[0].children);
    return filterRouteEnd;
}

// 删除/重置路由
export function resetRoute() {
    useRoutesList().routesList.forEach((route: any) => {
        const { name } = route;
        router.hasRoute(name) && router.removeRoute(name);
    });
}

// 初始化方法执行
const { isRequestRoutes } = useThemeConfig(pinia).themeConfig;
if (!isRequestRoutes) {
    // 未开启后端控制路由
    initAllFun();
} else if (isRequestRoutes) {
    // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
    initBackEndControlRoutesFun();
}


let SysWs: any;

// 路由加载前
router.beforeEach((to, from, next) => {
    NProgress.configure({ showSpinner: false });
    if (to.meta.title) NProgress.start();

    // 如果有标题参数，则再原标题后加上参数来区别
    if (to.meta.titleRename) {
        to.meta.title = templateResolve(to.meta.title as string, to.query)
    }

    const token = getSession('token');
    if (to.path === '/login' && !token) {
        next();
        NProgress.done();
        return;
    }
    if (!token) {
        next(`/login?redirect=${to.path}`);
        clearSession();
        resetRoute();
        NProgress.done();

        if (SysWs) {
            SysWs.close();
            SysWs = null;
        }
        return;
    }
    if (token && to.path === '/login') {
        next('/');
        NProgress.done();
        return;
    }

    // 终端不需要连接系统websocket消息
    if (!SysWs && to.path != '/machine/terminal') {
        SysWs = sockets.sysMsgSocket();
    }
    if (useRoutesList().routesList.length > 0) {
        next();
    }
});

// 路由加载后
router.afterEach(() => {
    NProgress.done();
    NextLoading.done();
});

// 导出路由
export default router;