fix: 登入失败刷新验证码;统一处理接口响应错误

Author: LinkanDawang

src/router/index.ts

@@ -43,7 +43,11 @@ import {
  * 如何排除文件请看：https://cn.vitejs.dev/guide/features.html#negative-patterns
  */
 const modules: Record<string, any> = import.meta.glob(
-  ["./modules/**/**.ts", "!./modules/**/remaining.ts"],
+  [
+    // "./modules/**/**.ts",  // 可以看见全部示例页面和组件
+    "./modules/home.ts",
+    "!./modules/**/remaining.ts"
+  ],
   {
     eager: true
   }

src/utils/http/index.ts

@@ -11,6 +11,7 @@ import type {
 } from "./types.d";
 import { stringify } from "qs";
 import NProgress from "../progress";
+import { message } from "@/utils/message";
 import { getToken, formatToken } from "@/utils/auth";
 import { useUserStoreHook } from "@/store/modules/user";
 
@@ -29,6 +30,13 @@ const defaultConfig: AxiosRequestConfig = {
   }
 };
 
+export type AxiosResponseData = {
+  ret: number;
+  msg: string;
+  data?: Object | Array<any>;
+  success: boolean;
+};
+
 class PureHttp {
   constructor() {
     this.httpInterceptorsRequest();
@@ -121,6 +129,17 @@ class PureHttp {
     instance.interceptors.response.use(
       (response: PureHttpResponse) => {
         const $config = response.config;
+        const respData: AxiosResponseData = response.data;
+        // fixMe 处理后端统一http status_code == 200 的情况
+        if (respData.ret >= 400) {
+          if (respData.ret < 500) {
+            // message("身份信息已失效", { type: "error" });
+            useUserStoreHook().logOut();
+          }
+          NProgress.done();
+          message(`${respData.ret}: ${respData.msg}`, { type: "error" });
+          return Promise.reject(response);
+        }
         // 关闭进度条动画
         NProgress.done();
         // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
@@ -139,6 +158,7 @@ class PureHttp {
         $error.isCancelRequest = Axios.isCancel($error);
         // 关闭进度条动画
         NProgress.done();
+        message("后端服务异常", { type: "error" });
         // 所有的响应异常 区分来源为取消请求/非取消请求
         return Promise.reject($error);
       }

src/views/login/index.vue

@@ -39,6 +39,7 @@ defineOptions({
 });
 
 const imgCode = ref("");
+const imgVerifyCodeComp = ref(null);
 const loginDay = ref(7);
 const router = useRouter();
 const loading = ref(false);
@@ -63,6 +64,12 @@ const ruleForm = reactive({
   verifyCode: ""
 });
 
+/** 重置图片验证码 */
+function clearVerifyCode() {
+  ruleForm.verifyCode = "";
+  imgVerifyCodeComp.value.getImgCode();
+}
+
 const onLogin = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(valid => {
@@ -89,6 +96,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
             message(t("login.pureLoginFail"), { type: "error" });
           }
         })
+        .catch(e => { clearVerifyCode(); })
         .finally(() => (loading.value = false));
     }
   });
@@ -228,7 +236,7 @@ watch(loginDay, value => {
                   :prefix-icon="useRenderIcon(Keyhole)"
                 >
                   <template v-slot:append>
-                    <ReImageVerify v-model:code="imgCode" />
+                    <ReImageVerify ref="imgVerifyCodeComp" v-model:code="imgCode" />
                   </template>
                 </el-input>
               </el-form-item>