✨规范code 403代表无权限 401代表登录失效

src/config/default/setting.config.js

@@ -34,7 +34,7 @@ const setting = {
   //路由模式，可选值为 history 或 hash
   routerMode: "hash",
   //不经过token校验的路由
-  routesWhiteList: ["/login", "/register", "/callback", "/404", "/401"],
+  routesWhiteList: ["/login", "/register", "/callback", "/404", "/403"],
   //加载时显示文字
   loadingText: "正在加载中...",
   //token名称

src/router/index.js

@@ -8,9 +8,9 @@ export const constantRoutes = [
     hidden: true,
   },
   {
-    path: "/401",
-    name: "401",
-    component: () => import("@/views/401"),
+    path: "/403",
+    name: "403",
+    component: () => import("@/views/403"),
     hidden: true,
   },
   {
@@ -88,18 +88,18 @@ export const asyncRoutes = [
     path: "/error",
     name: "Error",
     component: Layout,
-    redirect: "/error/401",
+    redirect: "/error/403",
     meta: {
       title: "错误页",
       icon: "error-warning-line",
     },
     children: [
       {
-        path: "401",
-        name: "Error401",
-        component: () => import("@/views/401"),
+        path: "403",
+        name: "Error403",
+        component: () => import("@/views/403"),
         meta: {
-          title: "401",
+          title: "403",
           icon: "error-warning-line",
         },
       },

src/utils/request.js

@@ -1,10 +1,9 @@
+import Vue from "vue";
 import axios from "axios";
 import {
   baseURL,
   contentType,
   debounce,
-  invalidCode,
-  noRoleCode,
   requestTimeout,
   successCode,
   tokenName,
@@ -13,33 +12,33 @@ import store from "@/store";
 import qs from "qs";
 import router from "@/router";
 import { isArray } from "@/utils/validate";
-import { message } from "ant-design-vue";
 
 let loadingInstance;
 
 /**
- * @author chuzhixin 1204505056@qq.com
  * @description 处理code异常
  * @param {*} code
  * @param {*} msg
  */
 const handleCode = (code, msg) => {
   switch (code) {
-    case invalidCode:
-      message.error(msg || `后端接口${code}异常`);
+    case 401:
+      Vue.prototype.$baseMessage(msg || `无权限访问`, "error");
       store.dispatch("user/resetAll").catch(() => {});
       break;
-    case noRoleCode:
-      router.push({ path: "/401" }).catch(() => {});
+    case 403:
+      router.push({ path: "/403" }).catch(() => {});
+      break;
+    case undefined:
+      Vue.prototype.$baseMessage(`后端接口未返回code`, "error");
       break;
     default:
-      message.error(msg || `后端接口${code}异常`);
+      Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, "error");
       break;
   }
 };
 
 /**
- * @author chuzhixin 1204505056@qq.com
  * @description axios初始化
  */
 const instance = axios.create({
@@ -51,7 +50,6 @@ const instance = axios.create({
 });
 
 /**
- * @author chuzhixin 1204505056@qq.com
  * @description axios请求拦截器
  */
 instance.interceptors.request.use(
@@ -64,9 +62,8 @@ instance.interceptors.request.use(
         "application/x-www-form-urlencoded;charset=UTF-8"
     )
       config.data = qs.stringify(config.data);
-    if (debounce.some((item) => config.url.includes(item))) {
-      //这里写加载动画
-    }
+    if (debounce.some((item) => config.url.includes(item)))
+      loadingInstance = Vue.prototype.$baseLoading();
     return config;
   },
   (error) => {
@@ -75,7 +72,6 @@ instance.interceptors.request.use(
 );
 
 /**
- * @author chuzhixin 1204505056@qq.com
  * @description axios响应拦截器
  */
 instance.interceptors.response.use(
@@ -94,7 +90,7 @@ instance.interceptors.response.use(
     } else {
       handleCode(code, msg);
       return Promise.reject(
-        "vue-admin-beautiful请求异常拦截:" +
+        "vue-admin-beautiful-pro请求异常拦截:" +
           JSON.stringify({ url: config.url, code, msg }) || "Error"
       );
     }
@@ -118,7 +114,7 @@ instance.interceptors.response.use(
         const code = message.substr(message.length - 3);
         message = "后端接口" + code + "异常";
       }
-      message.error(message || `后端接口未知异常`);
+      Vue.prototype.$baseMessage(message || `后端接口未知异常`, "error");
       return Promise.reject(error);
     }
   }

src/views/403.vue

@@ -4,7 +4,7 @@
       <a-row :gutter="20">
         <a-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <div class="pic-error">
-            <img class="pic-error-parent" src="@/assets/error_images/401.png" />
+            <img class="pic-error-parent" src="@/assets/error_images/403.png" />
             <img
               class="pic-error-child left"
               src="@/assets/error_images/cloud.png"
@@ -31,7 +31,7 @@
   import { mapActions } from "vuex";
 
   export default {
-    name: "Page401",
+    name: "Page403",
     data() {
       return {
         jumpTime: 5,

src/views/login/index.vue

@@ -95,7 +95,7 @@
         login: "user/login",
       }),
       handleRoute() {
-        return this.redirect === "/404" || this.redirect === "/401"
+        return this.redirect === "/404" || this.redirect === "/403"
           ? "/"
           : this.redirect;
       },