fix: 登录失效问题, 增加token刷新

iframe/src/App.vue

@@ -10,6 +10,7 @@
     :useTimedTask="useTimedTask"
     :useAirway="useAirway"
     @tokenInvalid="dispatchEvent('tokenInvalid')"
+    @refreshToken="dispatchEvent('refreshToken', $event)"
     @uavChange="dispatchEvent('uavChange', $event)"
     @taskAdd="dispatchEvent('taskAdd', $event)"
     @taskBatchAdd="dispatchEvent('taskBatchAdd', $event)"

src/components/MMCFlightControlCenter/api/request.js

 import axios from "axios";
-import Vue from "vue";
 import { resetMessage } from "./message";
-import router from "../router";
 import store from "../store";
+import { MessageBox } from "element-ui";
+
+// 请求队列
+let requestList = [];
+// 是否正在刷新中
+let isRefreshToken = false;
 
 const $axios = axios.create({
   // baseURL: process.env.VUE_APP_BASE_API_TG
@@ -45,6 +49,7 @@ $axios.interceptors.response.use(
     console.log("回应参数...", response);
     const status = response.status;
     const res = response.data;
+    const config = response.config;
     // 请求成功返回response.data
     if ((status >= 200 && status < 300) || status === 304) {
       switch (res.code) {
@@ -52,7 +57,54 @@ $axios.interceptors.response.use(
           return Promise.resolve(res);
 
         case 401:
-          window.$mmc.app.$emit('tokenInvalid');
+          // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
+          if (!isRefreshToken) {
+            isRefreshToken = true;
+
+            // 1. 如果获取不到刷新令牌，则只能执行登出操作
+            if (!store.state.token) {
+              return handleAuthorized();
+            }
+            // 2. 进行刷新访问令牌
+            try {
+              return new Promise((resolve, reject) => {
+                window.$mmc.app.$emit("refreshToken", {
+                  callback(data) {
+                    isRefreshToken = false;
+                    if (data.code === 0) {
+                      const token = data.token;
+                      console.log('store', store);
+                      window.$mmc.app.$store.commit('MMCFlightControlCenter/setState', {
+                        key: 'token',
+                        value: token
+                      })
+                      config.headers.Authorization = "Bearer " + token;
+                      requestList.forEach((cb) => {
+                        cb();
+                      });
+                      requestList = [];
+                      resolve($axios(config));
+                    } else {
+                      handleAuthorized();
+                    }
+                  },
+                });
+              });
+            } catch (e) {
+            } finally {
+              requestList = [];
+            }
+          } else {
+            // 添加到队列，等待刷新获取到新的令牌
+            return new Promise((resolve) => {
+              requestList.push(() => {
+                const token = store.state.token;
+                config.headers.Authorization = "Bearer " + token; // 让每个请求携带自定义token 请根据实际情况自行修改
+                resolve($axios(config));
+              });
+            });
+          }
+
           break;
 
         default:
@@ -100,3 +152,12 @@ $axios.interceptors.response.use(
 );
 
 export default $axios;
+
+function handleAuthorized() {
+  MessageBox.alert("登录超时,请重新登录!", "提示", {
+    confirmButtonText: "重新登录",
+    callback: (action) => {
+      window.$mmc.app.$emit("tokenInvalid");
+    },
+  });
+}