refactor: 进度条由请求时调整为切换路由显示

src/router/permission.ts

@@ -1,8 +1,12 @@
 import { Button, Message, Notification, Space } from '@arco-design/web-vue'
+import NProgress from 'nprogress'
 import router from '@/router'
 import { useRouteStore, useUserStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import { isHttp } from '@/utils/validate'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 // 版本更新
 let versionTag: string | null = null // 版本标识
@@ -68,12 +72,13 @@ export const resetHasRouteFlag = () => {
 router.beforeEach(async (to, from, next) => {
   const userStore = useUserStore()
   const routeStore = useRouteStore()
-
+  NProgress.start()
   // 判断该用户是否登录
   if (getToken()) {
     if (to.path === '/login') {
       // 如果已经登录，并准备进入 Login 页面，则重定向到主页
       next()
+      NProgress.done()
     } else {
       if (!hasRouteFlag) {
         try {
@@ -81,6 +86,7 @@ router.beforeEach(async (to, from, next) => {
           if (userStore.userInfo.pwdExpired && to.path !== '/pwdExpired') {
             Message.warning('密码已过期，请修改密码')
             next('/pwdExpired')
+            NProgress.done()
           }
           const accessRoutes = await routeStore.generateRoutes()
           accessRoutes.forEach((route) => {
@@ -92,13 +98,16 @@ router.beforeEach(async (to, from, next) => {
           // 确保添加路由已完成
           // 设置 replace: true, 因此导航将不会留下历史记录
           next({ ...to, replace: true })
+          NProgress.done()
         } catch (error: any) {
           // 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
           await userStore.logoutCallBack()
           next(`/login?redirect=${to.path}`)
+          NProgress.done()
         }
       } else {
         next()
+        NProgress.done()
       }
     }
   } else {
@@ -106,9 +115,11 @@ router.beforeEach(async (to, from, next) => {
     if (whiteList.includes(to.path)) {
       // 如果在免登录的白名单中，则直接进入
       next()
+      NProgress.done()
     } else {
       // 其他没有访问权限的页面将被重定向到登录页面
       next('/login')
+      NProgress.done()
     }
   }
 

src/utils/http.ts

@@ -1,17 +1,13 @@
 import axios from 'axios'
 import qs from 'query-string'
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
-import NProgress from 'nprogress'
 import { useUserStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import modalErrorWrapper from '@/utils/modal-error-wrapper'
 import messageErrorWrapper from '@/utils/message-error-wrapper'
 import notificationErrorWrapper from '@/utils/notification-error-wrapper'
-import 'nprogress/nprogress.css'
 import router from '@/router'
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
 interface ICodeMessage {
   [propName: number]: string
 }
@@ -41,7 +37,6 @@ const http: AxiosInstance = axios.create({
 // 请求拦截器
 http.interceptors.request.use(
   (config: AxiosRequestConfig) => {
-    NProgress.start() // 进度条
     const token = getToken()
     if (token) {
       if (!config.headers) {
@@ -62,12 +57,10 @@ http.interceptors.response.use(
     const { data } = response
     const { success, code, msg } = data
     if (response.request.responseType === 'blob') {
-      NProgress.done()
       return response
     }
     // 成功
     if (success) {
-      NProgress.done()
       return response
     }
 
@@ -80,14 +73,12 @@ http.interceptors.response.use(
         escToClose: false,
         okText: '重新登录',
         async onOk() {
-          NProgress.done()
           const userStore = useUserStore()
           await userStore.logoutCallBack()
           await router.replace('/login')
         },
       })
     } else {
-      NProgress.done()
       // 如果错误信息长度过长，使用 Notification 进行提示
       if (msg.length <= 15) {
         messageErrorWrapper({
@@ -101,7 +92,6 @@ http.interceptors.response.use(
     return Promise.reject(new Error(msg || '服务器端错误'))
   },
   (error) => {
-    NProgress.done()
     const response = Object.assign({}, error.response)
     response
     && messageErrorWrapper({