Browse Source

设置是否取消axios产生的错误提示,默认有提示

Michael Wang 4 years ago
parent
commit
8ff05e1c6e
3 changed files with 44 additions and 28 deletions
  1. 4 0
      src/auth/auth.js
  2. 2 1
      src/features/Login/Login.vue
  3. 38 27
      src/plugins/axiosApp.js

+ 4 - 0
src/auth/auth.js

@@ -1,5 +1,9 @@
 import Cookies from "js-cookie";
 
+/**
+ * FIXME: 原本以为设置httponly的cookie可以防止token被XSS攻击,但是前端设置不了httponly的cookie。
+ * 理论上前端存储在cookie和localStorage的token都可能被盗。
+ */
 const TokenKey = "Token";
 
 export function getToken() {

+ 2 - 1
src/features/Login/Login.vue

@@ -91,6 +91,7 @@
 </template>
 
 <script>
+import { LOGIN_BY_USERNAME } from "../../store/action-types";
 // import BasicContainer from "@/samples/BasicContainer/BasicContainer";
 const backgroundImage =
   "https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png";
@@ -112,7 +113,7 @@ export default {
       this.$refs["form"].validate(async (valid) => {
         if (valid) {
           try {
-            await this.$store.dispatch("LOGIN_BY_USERNAME", {
+            await this.$store.dispatch(LOGIN_BY_USERNAME, {
               loginName: this.user.username,
               password: this.user.password,
               code: "test1",

+ 38 - 27
src/plugins/axiosApp.js

@@ -7,6 +7,7 @@ import { notifyInvalidTokenThrottled } from "./axiosNotice";
 import { getToken, removeToken } from "../auth/auth";
 import axiosRetry from "axios-retry";
 import { DEVICE_ID } from "@/constant/constants";
+import { Notification } from "element-ui";
 
 const PLATFORM = "web";
 
@@ -70,14 +71,16 @@ _axiosApp.interceptors.response.use(
     return response;
   },
   (error) => {
+    const noErrorMessage = error.config.noErrorMessage;
     if (!error.response) {
-      // "Network Error" 网络不通,直接返回
-
-      Vue.prototype.$notify({
-        showClose: true,
-        message: "网络连接异常,请检查网络设置。",
-        type: "error",
-      });
+      if (noErrorMessage) {
+        // "Network Error" 网络不通,直接返回
+        Notification({
+          showClose: true,
+          message: "网络连接异常,请检查网络设置。",
+          type: "error",
+        });
+      }
       return Promise.reject(error);
     }
     // 这里是返回状态码不为200时候的错误处理
@@ -89,35 +92,43 @@ _axiosApp.interceptors.response.use(
       removeToken();
       return Promise.reject(error);
     } else if (status == 405) {
-      Vue.prototype.$notify({
-        showClose: true,
-        message: "没有权限!",
-        type: "error",
-      });
+      if (noErrorMessage) {
+        Notification({
+          showClose: true,
+          message: "没有权限!",
+          type: "error",
+        });
+      }
       return Promise.reject(error);
     } else if (status == 502) {
-      Vue.prototype.$notify({
-        showClose: true,
-        message: "服务器异常(502)!",
-        type: "error",
-      });
+      if (noErrorMessage) {
+        Notification({
+          showClose: true,
+          message: "服务器异常(502)!",
+          type: "error",
+        });
+      }
       return Promise.reject(error);
     }
 
     if (status != 200) {
       const data = error.response.data;
       if (data && data.message) {
-        Vue.prototype.$notify({
-          showClose: true,
-          message: data.message,
-          type: "error",
-        });
+        if (noErrorMessage) {
+          Notification({
+            showClose: true,
+            message: data.message,
+            type: "error",
+          });
+        }
       } else {
-        Vue.prototype.$notify({
-          showClose: true,
-          message: "未定义异常: " + JSON.stringify(data, 2),
-          type: "error",
-        });
+        if (noErrorMessage) {
+          Notification({
+            showClose: true,
+            message: "未定义异常: " + JSON.stringify(data, 2),
+            type: "error",
+          });
+        }
       }
       return Promise.reject(error);
     }