From aa4fd74c4c6f3e5259094855e7f2a180be881252 Mon Sep 17 00:00:00 2001 From: wang_fan_w <2547096351@qq.com> Date: Sun, 14 Jul 2024 19:29:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20500=E7=BD=91=E7=BB=9C=E6=96=AD=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/网络断开.svg | 1 + src/router/index.ts | 14 ++++- src/router/route.ts | 13 ++++- .../anti-shake/anti-shake.vue | 2 +- .../custom-instruction/throttle/throttle.vue | 2 +- src/views/error/500.vue | 51 +++++++++++++++++++ 6 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 src/assets/svgs/网络断开.svg create mode 100644 src/views/error/500.vue diff --git a/src/assets/svgs/网络断开.svg b/src/assets/svgs/网络断开.svg new file mode 100644 index 0000000..988bd22 --- /dev/null +++ b/src/assets/svgs/网络断开.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index ed4b1e4..c0a3c7a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,7 +7,8 @@ import { storeToRefs } from "pinia"; import { useUserInfoStore } from "@/store/modules/user-info"; import { useRoutesListStore } from "@/store/modules/route-list"; import { useRoutingMethod } from "@/hooks/useRoutingMethod"; - +// import { useRoute } from "vue-router"; +// const route = useRoute(); /** * 创建vue的路由示例 * @method createRouter(options: RouterOptions): Router @@ -41,7 +42,12 @@ router.beforeEach(async (to, from, next) => { const store = useUserInfoStore(pinia); const { token } = storeToRefs(store); console.log("去", to, "来自", from); - if (to.path === "/login" && !token.value) { + // next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach + // 浏览器离线，条件：网络离线、跳转路径非 /500 + // 这里拦截的是在无网络情况下的正常跳转，跳转500 + if (!navigator.onLine && to.path !== "/500") { + next("/500"); // 跳转500 + } else if (to.path === "/login" && !token.value) { // 1、去登录页，无token，放行 next(); } else if (!token.value) { @@ -53,6 +59,10 @@ router.beforeEach(async (to, from, next) => { // 项目内的跳转，处理跳转路由高亮 currentlyRoute(to.name as string); } else { + // 无网络，跳转500，放行 + if (!navigator.onLine && to.path == "/500") { + return next(); + } // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化 const routeStore = useRoutesListStore(pinia); const { routeTree } = storeToRefs(routeStore); diff --git a/src/router/route.ts b/src/router/route.ts index 0e18c7a..7d79c77 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -676,10 +676,19 @@ export const staticRoutes = [ export const notFoundAndNoPower = [ { path: "/401", // 无权限，跳转401 - name: "no-power", + name: "no-access", component: () => import("@/views/error/401.vue"), meta: { - title: "not-power", + title: "no-access", + hide: true + } + }, + { + path: "/500", // 无网络-浏览器离线 + name: "no-network", + component: () => import("@/views/error/500.vue"), + meta: { + title: "no-network", hide: true } }, diff --git a/src/views/custom-instruction/anti-shake/anti-shake.vue b/src/views/custom-instruction/anti-shake/anti-shake.vue index 06bfc43..58c6717 100644 --- a/src/views/custom-instruction/anti-shake/anti-shake.vue +++ b/src/views/custom-instruction/anti-shake/anti-shake.vue @@ -8,7 +8,7 @@ diff --git a/src/views/custom-instruction/throttle/throttle.vue b/src/views/custom-instruction/throttle/throttle.vue index f738458..8f3f2aa 100644 --- a/src/views/custom-instruction/throttle/throttle.vue +++ b/src/views/custom-instruction/throttle/throttle.vue @@ -12,7 +12,7 @@ diff --git a/src/views/error/500.vue b/src/views/error/500.vue new file mode 100644 index 0000000..2bd0dc9 --- /dev/null +++ b/src/views/error/500.vue @@ -0,0 +1,51 @@ + + + + +