mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 1.0 beta
This commit is contained in:
@ -1,188 +1,292 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { ROOT_ROUTE, constantRoutes, router, routes as staticRoutes } from '@/router';
|
||||
import { fetchUserRoutes } from '@/service';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import type { ElegantConstRoute, CustomRoute, RouteKey, LastLevelRouteKey, RouteMap } from '@elegant-router/types';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { router } from '@/router';
|
||||
import { createRoutes, getAuthVueRoutes, ROOT_ROUTE } from '@/router/routes';
|
||||
import { getRoutePath, getRouteName } from '@/router/elegant/transform';
|
||||
import { fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
|
||||
import {
|
||||
localStg,
|
||||
filterAuthRoutesByUserPermission,
|
||||
getCacheRoutes,
|
||||
getConstantRouteNames,
|
||||
transformAuthRouteToVueRoutes,
|
||||
transformAuthRouteToVueRoute,
|
||||
transformAuthRouteToMenu,
|
||||
transformAuthRouteToSearchMenus,
|
||||
transformRouteNameToRoutePath,
|
||||
transformRoutePathToRouteName,
|
||||
sortRoutes
|
||||
} from '@/utils';
|
||||
filterAuthRoutesByRoles,
|
||||
getGlobalMenusByAuthRoutes,
|
||||
updateLocaleOfGlobalMenus,
|
||||
getCacheRouteNames,
|
||||
isRouteExistByRouteName,
|
||||
getSelectedMenuKeyPathByKey,
|
||||
getBreadcrumbsByRoute
|
||||
} from './shared';
|
||||
import { useAppStore } from '../app';
|
||||
import { useAuthStore } from '../auth';
|
||||
import { useTabStore } from '../tab';
|
||||
|
||||
interface RouteState {
|
||||
export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const tabStore = useTabStore();
|
||||
const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
|
||||
const removeRouteFns: (() => void)[] = [];
|
||||
|
||||
/**
|
||||
* 权限路由模式:
|
||||
* - static - 前端声明的静态
|
||||
* - dynamic - 后端返回的动态
|
||||
* auth route mode
|
||||
* @description it recommends to use static mode in the development environment, and use dynamic mode in the production environment,
|
||||
* if use static mode in development environment, the auth routes will be auto generated by plugin "@elegant-router/vue"
|
||||
*/
|
||||
authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
|
||||
/** 是否初始化了权限路由 */
|
||||
isInitAuthRoute: boolean;
|
||||
/** 路由首页name(前端静态路由时生效,后端动态路由该值会被后端返回的值覆盖) */
|
||||
routeHomeName: AuthRoute.AllRouteKey;
|
||||
/** 菜单 */
|
||||
menus: App.GlobalMenuOption[];
|
||||
/** 搜索的菜单 */
|
||||
searchMenus: AuthRoute.Route[];
|
||||
/** 缓存的路由名称 */
|
||||
cacheRoutes: string[];
|
||||
}
|
||||
const authRouteMode = ref(import.meta.env.VITE_AUTH_ROUTE_MODE);
|
||||
|
||||
export const useRouteStore = defineStore('route-store', {
|
||||
state: (): RouteState => ({
|
||||
authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
|
||||
isInitAuthRoute: false,
|
||||
routeHomeName: transformRoutePathToRouteName(import.meta.env.VITE_ROUTE_HOME_PATH),
|
||||
menus: [],
|
||||
searchMenus: [],
|
||||
cacheRoutes: []
|
||||
}),
|
||||
actions: {
|
||||
/** 重置路由的store */
|
||||
resetRouteStore() {
|
||||
this.resetRoutes();
|
||||
this.$reset();
|
||||
},
|
||||
/** 重置路由数据,保留固定路由 */
|
||||
resetRoutes() {
|
||||
const routes = router.getRoutes();
|
||||
routes.forEach(route => {
|
||||
const name = (route.name || 'root') as AuthRoute.AllRouteKey;
|
||||
if (!this.isConstantRoute(name)) {
|
||||
router.removeRoute(name);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 是否是固定路由
|
||||
* @param name 路由名称
|
||||
*/
|
||||
isConstantRoute(name: AuthRoute.AllRouteKey) {
|
||||
const constantRouteNames = getConstantRouteNames(constantRoutes);
|
||||
return constantRouteNames.includes(name);
|
||||
},
|
||||
/**
|
||||
* 是否是有效的固定路由
|
||||
* @param name 路由名称
|
||||
*/
|
||||
isValidConstantRoute(name: AuthRoute.AllRouteKey) {
|
||||
const NOT_FOUND_PAGE_NAME: AuthRoute.NotFoundRouteKey = 'not-found';
|
||||
const constantRouteNames = getConstantRouteNames(constantRoutes);
|
||||
return constantRouteNames.includes(name) && name !== NOT_FOUND_PAGE_NAME;
|
||||
},
|
||||
/**
|
||||
* 处理权限路由
|
||||
* @param routes - 权限路由
|
||||
*/
|
||||
handleAuthRoute(routes: AuthRoute.Route[]) {
|
||||
(this.menus as App.GlobalMenuOption[]) = transformAuthRouteToMenu(routes);
|
||||
this.searchMenus = transformAuthRouteToSearchMenus(routes);
|
||||
/**
|
||||
* home route key
|
||||
*/
|
||||
const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
|
||||
|
||||
const vueRoutes = transformAuthRouteToVueRoutes(routes);
|
||||
/**
|
||||
* set route home
|
||||
* @param routeKey route key
|
||||
*/
|
||||
function setRouteHome(routeKey: LastLevelRouteKey) {
|
||||
routeHome.value = routeKey;
|
||||
}
|
||||
|
||||
vueRoutes.forEach(route => {
|
||||
router.addRoute(route);
|
||||
});
|
||||
/**
|
||||
* global menus
|
||||
*/
|
||||
const menus = ref<App.Global.Menu[]>([]);
|
||||
|
||||
this.cacheRoutes = getCacheRoutes(vueRoutes);
|
||||
},
|
||||
/** 动态路由模式下:更新根路由的重定向 */
|
||||
handleUpdateRootRedirect(routeKey: AuthRoute.AllRouteKey) {
|
||||
if (routeKey === 'root' || routeKey === 'not-found') {
|
||||
throw new Error('routeKey的值不能为root或者not-found');
|
||||
}
|
||||
const rootRoute: AuthRoute.Route = { ...ROOT_ROUTE, redirect: transformRouteNameToRoutePath(routeKey) };
|
||||
const rootRouteName: AuthRoute.AllRouteKey = 'root';
|
||||
router.removeRoute(rootRouteName);
|
||||
const rootVueRoute = transformAuthRouteToVueRoute(rootRoute)[0];
|
||||
router.addRoute(rootVueRoute);
|
||||
},
|
||||
/** 初始化动态路由 */
|
||||
async initDynamicRoute() {
|
||||
const { resetAuthStore } = useAuthStore();
|
||||
const { initHomeTab } = useTabStore();
|
||||
/**
|
||||
* get global menus
|
||||
*/
|
||||
function getGlobalMenus(routes: ElegantConstRoute[]) {
|
||||
menus.value = getGlobalMenusByAuthRoutes(routes);
|
||||
}
|
||||
|
||||
const { userId } = localStg.get('userInfo') || {};
|
||||
/**
|
||||
* update global menus by locale
|
||||
*/
|
||||
function updateGlobalMenusByLocale() {
|
||||
menus.value = updateLocaleOfGlobalMenus(menus.value);
|
||||
}
|
||||
|
||||
if (!userId) {
|
||||
throw new Error('userId 不能为空!');
|
||||
}
|
||||
/**
|
||||
* cache routes
|
||||
*/
|
||||
const cacheRoutes = ref<RouteKey[]>([]);
|
||||
|
||||
const { error, data } = await fetchUserRoutes(userId);
|
||||
/**
|
||||
* get cache routes
|
||||
* @param routes vue routes
|
||||
*/
|
||||
function getCacheRoutes(routes: RouteRecordRaw[]) {
|
||||
const { constantVueRoutes } = createRoutes();
|
||||
|
||||
if (!error) {
|
||||
this.handleAuthRoute(sortRoutes(data.routes));
|
||||
// home相关处理需要在最后,否则会出现找不到主页404的情况
|
||||
this.routeHomeName = data.home;
|
||||
this.handleUpdateRootRedirect(data.home);
|
||||
cacheRoutes.value = getCacheRouteNames([...constantVueRoutes, ...routes]);
|
||||
}
|
||||
|
||||
initHomeTab(data.home, router);
|
||||
/**
|
||||
* add cache routes
|
||||
* @param routeKey
|
||||
*/
|
||||
function addCacheRoutes(routeKey: RouteKey) {
|
||||
if (cacheRoutes.value.includes(routeKey)) return;
|
||||
|
||||
this.isInitAuthRoute = true;
|
||||
} else {
|
||||
resetAuthStore();
|
||||
}
|
||||
},
|
||||
/** 初始化静态路由 */
|
||||
async initStaticRoute() {
|
||||
const { initHomeTab } = useTabStore();
|
||||
const auth = useAuthStore();
|
||||
cacheRoutes.value.push(routeKey);
|
||||
}
|
||||
|
||||
const routes = filterAuthRoutesByUserPermission(staticRoutes, auth.userInfo.userRole);
|
||||
this.handleAuthRoute(routes);
|
||||
/**
|
||||
* remove cache routes
|
||||
* @param routeKey
|
||||
*/
|
||||
function removeCacheRoutes(routeKey: RouteKey) {
|
||||
const index = cacheRoutes.value.findIndex(item => item === routeKey);
|
||||
|
||||
initHomeTab(this.routeHomeName, router);
|
||||
if (index === -1) return;
|
||||
|
||||
this.isInitAuthRoute = true;
|
||||
},
|
||||
/** 初始化权限路由 */
|
||||
async initAuthRoute() {
|
||||
if (this.authRouteMode === 'dynamic') {
|
||||
await this.initDynamicRoute();
|
||||
} else {
|
||||
await this.initStaticRoute();
|
||||
}
|
||||
},
|
||||
/** 从缓存路由中去除某个路由 */
|
||||
removeCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const index = this.cacheRoutes.indexOf(name);
|
||||
if (index > -1) {
|
||||
this.cacheRoutes.splice(index, 1);
|
||||
}
|
||||
},
|
||||
/** 添加某个缓存路由 */
|
||||
addCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const index = this.cacheRoutes.indexOf(name);
|
||||
if (index === -1) {
|
||||
this.cacheRoutes.push(name);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重新缓存路由
|
||||
*/
|
||||
async reCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const { reloadPage } = useAppStore();
|
||||
cacheRoutes.value.splice(index, 1);
|
||||
}
|
||||
|
||||
const isCached = this.cacheRoutes.includes(name);
|
||||
/**
|
||||
* re-cache routes by route key
|
||||
* @param routeKey
|
||||
*/
|
||||
async function reCacheRoutesByKey(routeKey: RouteKey) {
|
||||
removeCacheRoutes(routeKey);
|
||||
|
||||
if (isCached) {
|
||||
this.removeCacheRoute(name);
|
||||
}
|
||||
await appStore.reloadPage();
|
||||
|
||||
await reloadPage();
|
||||
addCacheRoutes(routeKey);
|
||||
}
|
||||
|
||||
if (isCached) {
|
||||
this.addCacheRoute(name as AuthRoute.AllRouteKey);
|
||||
}
|
||||
/**
|
||||
* re-cache routes by route keys
|
||||
* @param routeKeys
|
||||
*/
|
||||
async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
|
||||
for await (const key of routeKeys) {
|
||||
await reCacheRoutesByKey(key);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* global breadcrumbs
|
||||
*/
|
||||
const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
|
||||
|
||||
/**
|
||||
* reset store
|
||||
*/
|
||||
async function resetStore() {
|
||||
const routeStore = useRouteStore();
|
||||
|
||||
routeStore.$reset();
|
||||
|
||||
resetVueRoutes();
|
||||
}
|
||||
|
||||
/**
|
||||
* reset vue routes
|
||||
*/
|
||||
function resetVueRoutes() {
|
||||
removeRouteFns.forEach(fn => fn());
|
||||
removeRouteFns.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* init auth route
|
||||
*/
|
||||
async function initAuthRoute() {
|
||||
if (authRouteMode.value === 'static') {
|
||||
await initStaticAuthRoute();
|
||||
} else {
|
||||
await initDynamicAuthRoute();
|
||||
}
|
||||
|
||||
tabStore.initHomeTab(router);
|
||||
}
|
||||
|
||||
/**
|
||||
* init static auth route
|
||||
*/
|
||||
async function initStaticAuthRoute() {
|
||||
const { authRoutes } = createRoutes();
|
||||
|
||||
const filteredAuthRoutes = filterAuthRoutesByRoles(authRoutes, authStore.userInfo.roles);
|
||||
|
||||
handleAuthRoutes(filteredAuthRoutes);
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* init dynamic auth route
|
||||
*/
|
||||
async function initDynamicAuthRoute() {
|
||||
const {
|
||||
data: { routes, home }
|
||||
} = await fetchGetUserRoutes();
|
||||
|
||||
handleAuthRoutes(routes);
|
||||
|
||||
setRouteHome(home);
|
||||
|
||||
handleUpdateRootRouteRedirect(home);
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* handle routes
|
||||
* @param routes auth routes
|
||||
*/
|
||||
function handleAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
const vueRoutes = getAuthVueRoutes(routes);
|
||||
|
||||
addRoutesToVueRouter(vueRoutes);
|
||||
|
||||
getGlobalMenus(routes);
|
||||
|
||||
getCacheRoutes(vueRoutes);
|
||||
}
|
||||
|
||||
/**
|
||||
* add routes to vue router
|
||||
* @param routes vue routes
|
||||
*/
|
||||
function addRoutesToVueRouter(routes: RouteRecordRaw[]) {
|
||||
routes.forEach(route => {
|
||||
const removeFn = router.addRoute(route);
|
||||
addRemoveRouteFn(removeFn);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* add remove route fn
|
||||
* @param fn
|
||||
*/
|
||||
function addRemoveRouteFn(fn: () => void) {
|
||||
removeRouteFns.push(fn);
|
||||
}
|
||||
|
||||
/**
|
||||
* update root route redirect when auth route mode is dynamic
|
||||
* @param redirectKey redirect route key
|
||||
*/
|
||||
function handleUpdateRootRouteRedirect(redirectKey: LastLevelRouteKey) {
|
||||
const redirect = getRoutePath(redirectKey);
|
||||
|
||||
if (redirect) {
|
||||
const rootRoute: CustomRoute = { ...ROOT_ROUTE, redirect };
|
||||
|
||||
router.removeRoute(rootRoute.name);
|
||||
|
||||
const [rootVueRoute] = getAuthVueRoutes([rootRoute]);
|
||||
|
||||
router.addRoute(rootVueRoute);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* get is auth route exist
|
||||
* @param routePath route path
|
||||
*/
|
||||
async function getIsAuthRouteExist(routePath: RouteMap[RouteKey]) {
|
||||
const routeName = getRouteName(routePath);
|
||||
|
||||
if (!routeName) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (authRouteMode.value === 'static') {
|
||||
const { authRoutes } = createRoutes();
|
||||
|
||||
return isRouteExistByRouteName(routeName, authRoutes);
|
||||
}
|
||||
|
||||
const { data } = await fetchIsRouteExist(routeName);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* get selected menu key path
|
||||
* @param selectedKey selected menu key
|
||||
*/
|
||||
function getSelectedMenuKeyPath(selectedKey: string) {
|
||||
return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
|
||||
}
|
||||
|
||||
return {
|
||||
resetStore,
|
||||
routeHome,
|
||||
menus,
|
||||
updateGlobalMenusByLocale,
|
||||
cacheRoutes,
|
||||
reCacheRoutesByKey,
|
||||
reCacheRoutesByKeys,
|
||||
breadcrumbs,
|
||||
initAuthRoute,
|
||||
isInitAuthRoute,
|
||||
setIsInitAuthRoute,
|
||||
getIsAuthRouteExist,
|
||||
getSelectedMenuKeyPath
|
||||
};
|
||||
});
|
||||
|
Reference in New Issue
Block a user