二次封装message组件，如果账号再别处登录或者登录超时提示并退回登录页

src/js/ajax.js

@@ -5,6 +5,7 @@ import router from "@/router";
 import qs from "qs";
 import { clearLoginInfo } from "@/utils";
 import isPlainObject from "lodash/isPlainObject";
+import {message} from "@/utils/message.js";
 
 import Vue from "vue";
 
@@ -89,7 +90,12 @@ axios.interceptors.response.use(
   (response) => {
     const code = [10007, 401, 10001, 10005];
     if (code.includes(response.data.code)) {
-      // debugger;
+      // console.log('登录失效');
+      message({
+        message: response.data.msg || "未知错误",
+        type: 'error',
+        duration: 2 * 1000
+      })
       clearLoginInfo();
       router.replace({ name: "login" });
 

src/js/dai/request-bipass.js

@@ -3,7 +3,7 @@
  ---------------------------------------------------------------*/
 import axios from "axios";
 import curry from "dai-js/tools/curry";
-import { Message } from "element-ui";
+import {message} from "@/utils/message.js";
 import { clearLoginInfo } from "@/utils";
 
 axios.defaults.withCredentials = true;

src/js/dai/request.js

@@ -3,7 +3,7 @@
  ---------------------------------------------------------------*/
 import axios from "axios";
 import curry from "dai-js/tools/curry";
-import { Message } from "element-ui";
+import {message} from "@/utils/message.js";
 import { clearLoginInfo } from "@/utils";
 
 axios.defaults.withCredentials=true
@@ -28,7 +28,6 @@ const request = curry(
       }
 
       url = processUrl(url);
-
       const succFn = (res) => {
         // log(`[request成功] ${url}`, data, res);
         let retData = {
@@ -42,12 +41,16 @@ const request = curry(
 			console.log(res,'request1');
 
         if (res.data.code > 8000 && res.data.code < 10000) {
-          Message.error(res.data.msg);
+          message({
+            message: res.data.msg || "未知错误",
+            type: 'error',
+            duration: 2 * 1000
+          })
         }
         if (res.data.code == 10005 || res.data.code == 10006 || res.data.code == 10007) {
           // 10005 token为空  10006登陆超时 10007别处登录
           console.log("登录失效");
-          Message.error(res.data.msg);
+          // Message.error(res.data.msg);
           clearLoginInfo();
           return next({
             name: "login",
@@ -58,12 +61,11 @@ const request = curry(
       };
 
       const failFn = (err) => {
-        // log(`[request失败] ${url}`, data, err);
+        // console.log(`[request失败] ${url}`, data, err)
-
         reslove(
           Object.assign({}, returnIniData, {
             httpCode: "9999", //访问出现意外
-            msg: "网络错误",
+            msg: err.data.msg,
           })
         );
       };

src/js/dai/request2.js

@@ -3,7 +3,7 @@
  ---------------------------------------------------------------*/
 import axios from "axios";
 import curry from "dai-js/tools/curry";
-import { Message } from "element-ui";
+import {message} from "@/utils/message.js";
 import { clearLoginInfo } from "@/utils";
 
 axios.defaults.withCredentials=true
@@ -42,12 +42,20 @@ const request = curry(
 			console.log(res,'request2');
 
         if (res.data.code > 8000 && res.data.code < 10000) {
-          Message.error(res.data.msg);
+          message({
+            message: res.data.msg || "未知错误",
+            type: 'error',
+            duration: 2 * 1000
+          })
         }
         if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
           // 10005 token为空  10006登陆超时 10007别处登录
           console.log("登录失效");
-          Message.error(res.data.msg);
+          message({
+            message: res.data.msg || "未知错误",
+            type: 'error',
+            duration: 2 * 1000
+          })
           clearLoginInfo();
           return next({
             name: "login",
@@ -63,7 +71,7 @@ const request = curry(
         reslove(
           Object.assign({}, returnIniData, {
             httpCode: "9999", //访问出现意外
-            msg: "网络错误",
+            msg: err.data.msg,
           })
         );
       };

src/main.js

@@ -1,3 +1,12 @@
+/*
+ * @Author: mk 2403457699@qq.com
+ * @Date: 2022-12-16 09:05:10
+ * @LastEditors: mk 2403457699@qq.com
+ * @LastEditTime: 2023-08-10 16:49:19
+ * @Description: 全局挂载提示信息,避免同时出现多条信息
+ * 
+ * 
+ */
 import Vue from "vue";
 import Element from "element-ui";
 
@@ -7,6 +16,8 @@ import router from "@/router";
 import "@/icons";
 import "@/element-ui/theme/index.css";
 import "@/assets/scss/aui.scss";
+import {message} from "@/utils/message.js";
+
 //按钮
 
 import http from "@/utils/request";
@@ -46,6 +57,7 @@ Vue.use(Element, {
   i18n: (key, value) => i18n.t(key, value),
 });
 
+Vue.prototype.$message = message
 // 弹窗底部滚动问题 弹窗需配合v-if使用
 Vue.directive("fixed", {
   inserted() {

src/router/index.js

@@ -5,6 +5,7 @@ import {
 	isURL
 } from "@/utils/validate";
 import store from "@/js/store";
+import {message} from "@/utils/message.js";
 Vue.use(Router);
 const CUSTOMER = process.env.VUE_APP_CUSTOMER;
 // 页面路由(独立页面)
@@ -433,7 +434,11 @@ router.beforeEach((to, from, next) => {
 		if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
 			// 10005 token为空  10006登陆超时 10007别处登录
 			console.log("登录失效");
-			Vue.prototype.$message.error(res.msg);
+			message({
+				message: res.msg || "未知错误",
+				type: 'error',
+				duration: 2 * 1000
+			  })
 			return next({
 				name: "login",
 			});
@@ -444,7 +449,8 @@ router.beforeEach((to, from, next) => {
 			...to,
 			replace: true,
 		});
-	}).catch(() => {
+	}).catch((err) => {
+		console.log(err);
 		next({
 			name: "login",
 		});
@@ -452,10 +458,15 @@ router.beforeEach((to, from, next) => {
 	http.get("gov/access/menu/navDigitalCommunityNew").then(({
 		data: res
 	}) => {
+		console.log(res);
 		if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
 			// 10005 token为空  10006登陆超时 10007别处登录
 			console.log("登录失效");
-			Vue.prototype.$message.error(res.msg);
+			message({
+				message: res.msg || "未知错误",
+				type: 'error',
+				duration: 2 * 1000
+			  })
 			return next({
 				name: "login",
 			});
@@ -468,10 +479,11 @@ router.beforeEach((to, from, next) => {
 			...to,
 			replace: true,
 		});
-	}).catch(() => {
+	}).catch((err) => {
-		// next({
+		console.log(err);
-		//   name: "login",
+		next({
-		// });
+		  name: "login",
+		});
 	});
 });
 /**

src/utils/message.js

@@ -0,0 +1,33 @@
+/*
+ * @Author: mk 2403457699@qq.com
+ * @Date: 2023-08-10 16:44:07
+ * @LastEditors: mk 2403457699@qq.com
+ * @LastEditTime: 2023-08-10 16:55:35
+ * @Description: 二次封装message组件,避免一次弹出多个
+ * 
+ * 
+ */
+import { Message } from 'element-ui'
+
+// 避免出现多个报错信息弹窗
+let messageInstance = null
+const resetMessage = (options) => {
+  if (messageInstance) {
+    // 先把第一条信息关闭，再弹出第二条信息
+    messageInstance.close()
+  }
+  messageInstance = Message(options)
+}
+
+// 重新定义 message.success 等 4个方法
+['error', 'success', 'info', 'warning'].forEach(type => {
+  resetMessage[type] = options => {
+    options = {
+      type: type,
+      message: options
+    }
+    return resetMessage(options)
+  }
+})
+
+export const message = resetMessage

src/utils/request.js

@@ -1,3 +1,14 @@
+/*
+ * @Author: mk 2403457699@qq.com
+ * @Date: 2023-03-18 11:24:39
+ * @LastEditors: mk 2403457699@qq.com
+ * @LastEditTime: 2023-08-10 16:34:23
+ * @Description: 请求拦截中添加
+ * 
+ * 
+ */
+import {message} from "@/utils/message.js";
+
 import axios from 'axios'
 import Cookies from 'js-cookie'
 import router from '@/router'
@@ -57,6 +68,11 @@ http.interceptors.response.use(response => {
   const code = [10007, 401, 10001, 10005]
   if (code.includes(response.data.code)) {
     clearLoginInfo()
+    message({
+      message: response.data.msg || "未知错误",
+      type: 'error',
+      duration: 2 * 1000
+    })
     // localStorage.setItem('userType', 'work')
     // let userType = localStorage.getItem("userType");
     // if (userType === 'work'){

src/views/main-shuju/main-navbar.vue

@@ -241,7 +241,6 @@ export default {
                   this.$message.error(res.msg);
                 }
               }
-
               clearLoginInfo();
 
               this.$router.push({ name: "login" });

src/views/main.vue

@@ -165,6 +165,7 @@ export default {
 						);
 					}
 				} else {
+					
 					clearLoginInfo();
 					this.$router.push({ name: "login" });
 				}