fix: 路由加载合并排序(还存在切换账号菜单缓存问题)
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useRouter } from 'vue-router';
|
||||
import type { RouteLocationRaw } from 'vue-router';
|
||||
import type { RouteKey } from '@elegant-router/types';
|
||||
import { router as globalRouter } from '@/router';
|
||||
import type {RouteLocationRaw} from 'vue-router';
|
||||
import {useRouter} from 'vue-router';
|
||||
import type {RouteKey} from '@elegant-router/types';
|
||||
import {router as globalRouter} from '@/router';
|
||||
|
||||
/**
|
||||
* Router push
|
||||
@@ -24,7 +24,7 @@ export function useRouterPush(inSetup = true) {
|
||||
}
|
||||
|
||||
async function routerPushByKey(key: RouteKey, options?: RouterPushOptions) {
|
||||
const { query, params } = options || {};
|
||||
const {query, params} = options || {};
|
||||
|
||||
const routeLocation: RouteLocationRaw = {
|
||||
name: key
|
||||
@@ -53,7 +53,6 @@ export function useRouterPush(inSetup = true) {
|
||||
*/
|
||||
async function toLogin(loginModule?: UnionKey.LoginModule, redirectUrl?: string) {
|
||||
const module = loginModule || 'pwd-login';
|
||||
|
||||
const options: RouterPushOptions = {
|
||||
params: {
|
||||
module
|
||||
@@ -77,7 +76,7 @@ export function useRouterPush(inSetup = true) {
|
||||
async function toggleLoginModule(module: UnionKey.LoginModule) {
|
||||
const query = route.value.query as Record<string, string>;
|
||||
|
||||
return routerPushByKey('login', { query, params: { module } });
|
||||
return routerPushByKey('login', {query, params: {module}});
|
||||
}
|
||||
|
||||
/** Redirect from login */
|
||||
|
||||
@@ -79,6 +79,8 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
i18nKey: 'route.user-center'
|
||||
}
|
||||
},
|
||||
|
||||
// 下面是管理员角色才有
|
||||
{
|
||||
name: 'function',
|
||||
path: '/function',
|
||||
@@ -87,7 +89,7 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
title: 'function',
|
||||
i18nKey: 'route.function',
|
||||
icon: 'icon-park-outline:all-application',
|
||||
order: 6,
|
||||
order: 1002,
|
||||
roles: ['admin'],
|
||||
},
|
||||
children: [
|
||||
@@ -205,7 +207,7 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
title: 'about',
|
||||
i18nKey: 'route.about',
|
||||
icon: 'fluent:book-information-24-regular',
|
||||
order: 100,
|
||||
order: 1003,
|
||||
roles: ['admin']
|
||||
}
|
||||
},
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
// Generated by elegant-router
|
||||
// Read more: https://github.com/soybeanjs/elegant-router
|
||||
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import type { ElegantConstRoute } from '@elegant-router/vue';
|
||||
import type { RouteKey, RouteMap, RoutePath } from '@elegant-router/types';
|
||||
import type {RouteRecordRaw} from 'vue-router';
|
||||
import type {ElegantConstRoute} from '@elegant-router/vue';
|
||||
import type {RouteKey, RouteMap} from '@elegant-router/types';
|
||||
import BaseLayout from '@/layouts/base-layout/index.vue';
|
||||
import BlankLayout from '@/layouts/blank-layout/index.vue';
|
||||
|
||||
@@ -84,14 +84,14 @@ function transformElegantRouteToVueRoute(
|
||||
route.props = true;
|
||||
}
|
||||
|
||||
const { name, path, component, children, ...rest } = route;
|
||||
const {name, path, component, children, ...rest} = route;
|
||||
|
||||
const vueRoute = { name, path, ...rest } as RouteRecordRaw;
|
||||
const vueRoute = {name, path, ...rest} as RouteRecordRaw;
|
||||
|
||||
try {
|
||||
if (component) {
|
||||
if (isSingleLevelRoute(route)) {
|
||||
const { layout, view } = getSingleLevelRouteComponent(component);
|
||||
const {layout, view} = getSingleLevelRouteComponent(component);
|
||||
|
||||
const singleLevelRoute: RouteRecordRaw = {
|
||||
path,
|
||||
@@ -208,18 +208,5 @@ const routeMap: RouteMap = {
|
||||
* @param name route name
|
||||
*/
|
||||
export function getRoutePath<T extends RouteKey>(name: T) {
|
||||
console.log(name);
|
||||
return routeMap[name];
|
||||
}
|
||||
|
||||
/**
|
||||
* get route name by route path
|
||||
* @param path route path
|
||||
*/
|
||||
export function getRouteName(path: RoutePath) {
|
||||
const routeEntries = Object.entries(routeMap) as [RouteKey, RoutePath][];
|
||||
|
||||
const routeName: RouteKey | null = routeEntries.find(([, routePath]) => routePath === path)?.[0] || null;
|
||||
|
||||
return routeName;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { computed, ref, shallowRef } from 'vue';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import type { CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey } from '@elegant-router/types';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { router } from '@/router';
|
||||
import { createStaticRoutes, getAuthVueRoutes } from '@/router/routes';
|
||||
import { ROOT_ROUTE } from '@/router/routes/builtin';
|
||||
import { getRoutePath } from '@/router/elegant/transform';
|
||||
import { useAppStore } from '../app';
|
||||
import { useAuthStore } from '../auth';
|
||||
import { useTabStore } from '../tab';
|
||||
import {computed, ref, shallowRef} from 'vue';
|
||||
import type {RouteRecordRaw} from 'vue-router';
|
||||
import {defineStore} from 'pinia';
|
||||
import {useBoolean} from '@sa/hooks';
|
||||
import type {CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey} from '@elegant-router/types';
|
||||
import {SetupStoreId} from '@/enum';
|
||||
import {router} from '@/router';
|
||||
import {createStaticRoutes, getAuthVueRoutes} from '@/router/routes';
|
||||
import {ROOT_ROUTE} from '@/router/routes/builtin';
|
||||
import {getRoutePath} from '@/router/elegant/transform';
|
||||
import {useAppStore} from '../app';
|
||||
import {useAuthStore} from '../auth';
|
||||
import {useTabStore} from '../tab';
|
||||
import {
|
||||
filterAuthRoutesByRoles,
|
||||
getBreadcrumbsByRoute,
|
||||
@@ -26,8 +26,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const tabStore = useTabStore();
|
||||
const { bool: isInitConstantRoute, setBool: setIsInitConstantRoute } = useBoolean();
|
||||
const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
|
||||
const {bool: isInitConstantRoute, setBool: setIsInitConstantRoute} = useBoolean();
|
||||
const {bool: isInitAuthRoute, setBool: setIsInitAuthRoute} = useBoolean();
|
||||
|
||||
|
||||
/** Home route key */
|
||||
@@ -146,17 +146,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
async function initConstantRoute() {
|
||||
if (isInitConstantRoute.value) return;
|
||||
|
||||
// if (authRouteMode.value === 'static') {
|
||||
const { constantRoutes } = createStaticRoutes();
|
||||
const {constantRoutes} = createStaticRoutes();
|
||||
|
||||
addAuthRoutes(constantRoutes);
|
||||
// } else {
|
||||
// const { data, error } = await fetchGetConstantRoutes();
|
||||
|
||||
// if (!error) {
|
||||
// addAuthRoutes(data);
|
||||
// }
|
||||
// }
|
||||
|
||||
handleAuthRoutes();
|
||||
|
||||
@@ -165,17 +157,12 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
|
||||
/** Init auth route */
|
||||
async function initAuthRoute() {
|
||||
// await initStaticAuthRoute();
|
||||
// await initDynamicAuthRoute();
|
||||
|
||||
|
||||
const { data: routes, error } = await doGetUserRoutes();
|
||||
const {data: routes, error} = await doGetUserRoutes();
|
||||
if (!error) {
|
||||
const { authRoutes: staticAuthRoutes } = createStaticRoutes();
|
||||
const {authRoutes: staticAuthRoutes} = createStaticRoutes();
|
||||
const filteredAuthRoutes = filterAuthRoutesByRoles(staticAuthRoutes, authStore.userInfo.roles ?? []);
|
||||
console.log(authStore.userInfo.roles,filteredAuthRoutes)
|
||||
console.log(authStore.userInfo.roles,[ ...filteredAuthRoutes,...routes])
|
||||
addAuthRoutes([ ...filteredAuthRoutes,...routes]);
|
||||
addAuthRoutes(filteredAuthRoutes.concat(routes));
|
||||
|
||||
handleAuthRoutes();
|
||||
|
||||
@@ -190,36 +177,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
tabStore.initHomeTab();
|
||||
}
|
||||
|
||||
/** Init static auth route */
|
||||
async function initStaticAuthRoute() {
|
||||
const { authRoutes: staticAuthRoutes } = createStaticRoutes();
|
||||
const filteredAuthRoutes = filterAuthRoutesByRoles(staticAuthRoutes, authStore.userInfo.roles ?? []);
|
||||
|
||||
addAuthRoutes(filteredAuthRoutes);
|
||||
|
||||
handleAuthRoutes();
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/** Init dynamic auth route */
|
||||
async function initDynamicAuthRoute() {
|
||||
const { data: routes, error } = await doGetUserRoutes();
|
||||
if (!error) {
|
||||
addAuthRoutes(routes);
|
||||
|
||||
handleAuthRoutes();
|
||||
|
||||
setRouteHome('home');
|
||||
|
||||
handleUpdateRootRouteRedirect('home');
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
} else {
|
||||
await authStore.resetStore();
|
||||
}
|
||||
}
|
||||
|
||||
/** handle auth routes */
|
||||
function handleAuthRoutes() {
|
||||
const sortRoutes = sortRoutesByOrder(authRoutes.value);
|
||||
@@ -265,7 +222,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const redirect = getRoutePath(redirectKey);
|
||||
|
||||
if (redirect) {
|
||||
const rootRoute: CustomRoute = { ...ROOT_ROUTE, redirect };
|
||||
const rootRoute: CustomRoute = {...ROOT_ROUTE, redirect};
|
||||
|
||||
router.removeRoute(rootRoute.name);
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ function sortRouteByOrder(route: ElegantConstRoute) {
|
||||
* @param routes routes
|
||||
*/
|
||||
export function sortRoutesByOrder(routes: ElegantConstRoute[]) {
|
||||
routes.sort((next, prev) => (Number(next.meta?.order) || 0) - (Number(prev.meta?.order) || 0));
|
||||
routes.sort((next, prev) => (Number(next.meta?.order) || 1) - (Number(prev.meta?.order) || 1));
|
||||
routes.forEach(sortRouteByOrder);
|
||||
|
||||
return routes;
|
||||
|
||||
Reference in New Issue
Block a user