【功能优化】WebSocket 使用 refreshToken 认证，解决无法刷新访问令牌的问题

sheep/hooks/useWebSocket.js

@@ -1,6 +1,7 @@
 import { onBeforeUnmount, reactive, ref } from 'vue';
 import { baseUrl, websocketPath } from '@/sheep/config';
 import { copyValueToTarget } from '@/sheep/util';
+import { getRefreshToken } from '@/sheep/request';
 
 /**
  * WebSocket 创建 hook
@@ -8,12 +9,8 @@ import { copyValueToTarget } from '@/sheep/util';
  * @return {{options: *}}
  */
 export function useWebSocket(opt) {
-  const getAccessToken = () => {
-    return uni.getStorageSync('token');
-  };
-
   const options = reactive({
-    url: (baseUrl + websocketPath).replace('http', 'ws') + '?token=' + getAccessToken(), // ws 地址
+    url: (baseUrl + websocketPath).replace('http', 'ws') + '?token=' + getRefreshToken(), // ws 地址
     isReconnecting: false, // 正在重新连接
     reconnectInterval: 3000, // 重连间隔，单位毫秒
     heartBeatInterval: 5000, // 心跳间隔，单位毫秒
@@ -22,12 +19,9 @@ export function useWebSocket(opt) {
     destroy: false, // 是否销毁
     pingTimeout: null, // 心跳检测定时器
     reconnectTimeout: null, // 重连定时器ID的属性
-    onConnected: () => {
-    }, // 连接成功时触发
-    onClosed: () => {
-    }, // 连接关闭时触发
-    onMessage: (data) => {
-    }, // 收到消息
+    onConnected: () => {}, // 连接成功时触发
+    onClosed: () => {}, // 连接关闭时触发
+    onMessage: (data) => {}, // 收到消息
   });
   const SocketTask = ref(null); // SocketTask 由 uni.connectSocket() 接口创建
 
@@ -58,7 +52,8 @@ export function useWebSocket(opt) {
       // 情况一：实例销毁
       if (options.destroy) {
         options.onClosed();
-      } else { // 情况二：连接失败重连
+      } else {
+        // 情况二：连接失败重连
         // 停止心跳检查
         stopHeartBeat();
         // 重连
@@ -140,10 +135,8 @@ export function useWebSocket(opt) {
     copyValueToTarget(options, opt);
     SocketTask.value = uni.connectSocket({
       url: options.url,
-      complete: () => {
-      },
-      success: () => {
-      },
+      complete: () => {},
+      success: () => {},
     });
     initEventListeners();
   };

sheep/request/index.js

@@ -136,9 +136,11 @@ http.interceptors.response.use(
     }
 
     // 自定义处理【showSuccess 成功提示】：如果需要显示成功提示，则显示成功提示
-		if (response.config.custom.showSuccess
-      && response.config.custom.successMsg !== ''
-      &&  response.data.code === 0) {
+    if (
+      response.config.custom.showSuccess &&
+      response.config.custom.successMsg !== '' &&
+      response.data.code === 0
+    ) {
       uni.showToast({
         title: response.config.custom.successMsg,
         icon: 'none',
@@ -215,21 +217,21 @@ http.interceptors.response.use(
 );
 
 // Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
-let requestList = [] // 请求队列
-let isRefreshToken = false // 是否正在刷新中
+let requestList = []; // 请求队列
+let isRefreshToken = false; // 是否正在刷新中
 const refreshToken = async (config) => {
   // 如果当前已经是 refresh-token 的 URL 地址，并且还是 401 错误，说明是刷新令牌失败了，直接返回 Promise.reject(error)
   if (config.url.indexOf('/member/auth/refresh-token') >= 0) {
-    return Promise.reject('error')
+    return Promise.reject('error');
   }
 
   // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
   if (!isRefreshToken) {
-    isRefreshToken = true
+    isRefreshToken = true;
     // 1. 如果获取不到刷新令牌，则只能执行登出操作
-    const refreshToken = getRefreshToken()
+    const refreshToken = getRefreshToken();
     if (!refreshToken) {
-      return handleAuthorized()
+      return handleAuthorized();
     }
     // 2. 进行刷新访问令牌
     try {
@@ -240,34 +242,34 @@ const refreshToken = async (config) => {
         throw new Error('刷新令牌失败');
       }
       // 2.1 刷新成功，则回放队列的请求 + 当前请求
-      config.header.Authorization = 'Bearer ' + getAccessToken()
+      config.header.Authorization = 'Bearer ' + getAccessToken();
       requestList.forEach((cb) => {
-        cb()
-      })
-      requestList = []
-      return request(config)
+        cb();
+      });
+      requestList = [];
+      return request(config);
     } catch (e) {
       // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
       // 2.2 刷新失败，只回放队列的请求
       requestList.forEach((cb) => {
-        cb()
-      })
+        cb();
+      });
       // 提示是否要登出。即不回放当前请求！不然会形成递归
-      return handleAuthorized()
+      return handleAuthorized();
     } finally {
-      requestList = []
-      isRefreshToken = false
+      requestList = [];
+      isRefreshToken = false;
     }
   } else {
     // 添加到队列，等待刷新获取到新的令牌
     return new Promise((resolve) => {
       requestList.push(() => {
-        config.header.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-        resolve(request(config))
-      })
-    })
+        config.header.Authorization = 'Bearer ' + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+        resolve(request(config));
+      });
+    });
   }
-}
+};
 
 /**
  * 处理 401 未登录的错误
@@ -279,19 +281,19 @@ const handleAuthorized = () => {
   // 登录超时
   return Promise.reject({
     code: 401,
-    msg: userStore.isLogin ? '您的登陆已过期' : '请先登录'
-  })
-}
+    msg: userStore.isLogin ? '您的登陆已过期' : '请先登录',
+  });
+};
 
 /** 获得访问令牌 */
-const getAccessToken = () => {
+export const getAccessToken = () => {
   return uni.getStorageSync('token');
-}
+};
 
 /** 获得刷新令牌 */
-const getRefreshToken = () => {
+export const getRefreshToken = () => {
   return uni.getStorageSync('refresh-token');
-}
+};
 
 const request = (config) => {
   return http.middleware(config);