From 6b36c93779732e715cc3b0d7637915eabaa518ca Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Tue, 29 Jun 2021 14:46:09 +0800 Subject: [PATCH] fix: use addRoute refresh page 404 --- src/components/info/index.vue | 8 +++- src/router/index.ts | 69 +++++++++++++++++++++++++++++++-- src/store/modules/permission.ts | 55 +------------------------- 3 files changed, 73 insertions(+), 59 deletions(-) diff --git a/src/components/info/index.vue b/src/components/info/index.vue index c2eb3b069..2a85dc65a 100644 --- a/src/components/info/index.vue +++ b/src/components/info/index.vue @@ -59,7 +59,9 @@ export interface ContextProps { dynamicText?: string; } -import { useRouter, useRoute } from "vue-router"; +import { useRouter, useRoute, Router } from "vue-router"; + +import { initRouter } from "/@/router/index"; export default defineComponent({ name: "Info", @@ -133,7 +135,9 @@ export default defineComponent({ username: "admin", accessToken: "eyJhbGciOiJIUzUxMiJ9.test" }); - router.push("/"); + initRouter("admin").then((router: Router) => { + router.push("/"); + }); }; onBeforeMount(() => { diff --git a/src/router/index.ts b/src/router/index.ts index 2f9e5ca1b..efcbedd66 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,4 +1,9 @@ -import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; +import { + createRouter, + createWebHashHistory, + RouteRecordRaw, + Router, +} from "vue-router"; import homeRouter from "./modules/home"; import flowChartRouter from "./modules/flowchart"; @@ -13,6 +18,8 @@ import { storageSession } from "../utils/storage"; import { i18n } from "/@/plugins/i18n/index"; import { usePermissionStoreHook } from "/@/store/modules/permission"; +import { getAsyncRoutes } from "/@/api/routes"; + const constantRoutes: Array = [ homeRouter, flowChartRouter, @@ -34,6 +41,25 @@ export const ascending = (arr) => { export const constantRoutesArr = ascending(constantRoutes).concat( ...remainingRouter ); +import Layout from "/@/layout/index.vue"; +// https://cn.vitejs.dev/guide/features.html#glob-import +const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue"); + +// 过滤后端传来的动态路由重新生成规范路由 +export const addAsyncRoutes = (arrRoutes: Array) => { + if (!arrRoutes || !arrRoutes.length) return; + arrRoutes.forEach((v: any) => { + if (v.redirect) { + v.component = Layout; + } else { + v.component = modulesRoutes[`/src/views${v.path}/index.vue`]; + } + if (v.children) { + addAsyncRoutes(v.children); + } + }); + return arrRoutes; +}; const router = createRouter({ history: createWebHashHistory(), @@ -53,15 +79,50 @@ const router = createRouter({ }, }); +export const initRouter = (name) => { + return new Promise((resolve, reject) => { + getAsyncRoutes({ name }).then(({ info }) => { + if (info.length === 0) { + usePermissionStoreHook().changeSetting(info); + } else { + addAsyncRoutes([info]).map((v: any) => { + // 防止重复添加路由 + if ( + router.options.routes.findIndex( + (value) => value.path === v.path + ) !== -1 + ) { + return; + } else { + // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转 + router.options.routes.push(v); + // 最终路由进行升序 + ascending(router.options.routes); + router.addRoute(v.name, v); + usePermissionStoreHook().changeSetting(info); + resolve(router); + } + }); + } + router.addRoute({ + path: "/:pathMatch(.*)", + redirect: "/error/404", + }); + }); + }); +}; + import NProgress from "../utils/progress"; const whiteList = ["/login", "/register"]; router.beforeEach((to, _from, next) => { - // _from?.name; let name = storageSession.getItem("info"); - if (name) { - usePermissionStoreHook().changeSetting(); + // 刷新 + if (name && !_from?.name) { + initRouter(name.username).then((router: Router) => { + router.push(to.path); + }); } NProgress.start(); const { t } = i18n.global; diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 4e7741e54..d3b70a57f 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -3,35 +3,10 @@ import { store } from "/@/store"; import { constantRoutesArr, ascending } from "/@/router/index"; -import { getAsyncRoutes } from "/@/api/routes"; -import Layout from "/@/layout/index.vue"; -import router from "/@/router/index"; -import { storageSession } from "/@/utils/storage"; - -// https://cn.vitejs.dev/guide/features.html#glob-import -const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue"); - -// 过滤后端传来的动态路由重新生成规范路由 -const addAsyncRoutes = (arrRoutes: Array) => { - if (!arrRoutes || !arrRoutes.length) return; - arrRoutes.forEach((v: any) => { - if (v.redirect) { - v.component = Layout; - } else { - v.component = modulesRoutes[`/src/views${v.path}/index.vue`]; - } - if (v.children) { - addAsyncRoutes(v.children); - } - }); - return arrRoutes; -}; - export const usePermissionStore = defineStore({ id: "pure-permission", state: () => ({ constantRoutes: constantRoutesArr, //静态路由 - asyncRoutes: [], //动态路由 wholeRoutes: [], }), actions: { @@ -39,35 +14,9 @@ export const usePermissionStore = defineStore({ this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter( (v) => v.meta.showLink ); - this.asyncRoutes.push(routes); }, - async changeSetting() { - let name = storageSession.getItem("info")?.username; - await getAsyncRoutes({ name }).then(({ info }) => { - if (info.length === 0) { - this.wholeRoutes = router.options.routes.filter( - (v) => v.meta.showLink - ); - return; - } - addAsyncRoutes([info]).forEach((v: any) => { - // 防止重复添加路由 - if ( - router.options.routes.findIndex( - (value) => value.path === v.path - ) !== -1 - ) { - return; - } else { - // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转 - router.options.routes.push(v); - // 最终路由进行升序 - ascending(router.options.routes); - router.addRoute(v.name, v); - this.asyncActionRoutes(v); - } - }); - }); + async changeSetting(routes) { + await this.asyncActionRoutes(routes); }, }, });