监听传输过来的 postMessage传输token

src/App.vue

@@ -4,9 +4,68 @@ import { getUserInfoAPI } from 'http/api/login/index'
 import { mainStore } from 'store/main'
 import { useStore } from 'store/user'
 import { useRoute, useRouter } from 'vue-router'
+import { onMounted, onUnmounted } from 'vue'
+
 const userStore = mainStore()
 const store = useStore()
 const router = useRouter()
+
+// 监听来自A项目的 postMessage
+const handleMessage = (event: MessageEvent) => {
+    // 安全检查：验证消息来源
+    // 在生产环境中，建议验证 event.origin 是否为可信来源
+    // 例如: if (event.origin !== 'https://your-a-project-domain.com') return
+
+    try {
+        if (event.data && event.data.type === 'SET_TOKEN') {
+            const token = event.data.token
+            console.log('B项目收到来自A项目的token')
+
+            if (token && typeof token === 'string') {
+                // 将token存储到localStorage，供axios拦截器使用
+                localStorage.setItem('tokenNew', token)
+                console.log('Token已成功保存到localStorage，后续请求将自动携带Authorization头')
+
+                // 可选：向A项目发送确认消息
+                if (event.source && typeof event.source.postMessage === 'function') {
+                    (event.source as Window).postMessage(
+                        { type: 'TOKEN_RECEIVED', success: true },
+                        event.origin
+                    )
+                }
+            } else {
+                console.warn('收到的token格式不正确')
+            }
+        }
+    } catch (error) {
+        console.error('处理postMessage时发生错误:', error)
+    }
+}
+
+onMounted(() => {
+    // 添加消息监听器
+    window.addEventListener('message', handleMessage)
+    console.log('B项目已开始监听来自A项目的消息')
+
+    // 检查localStorage中是否已有token
+    const existingToken = localStorage.getItem('tokenNew')
+    if (existingToken) {
+        console.log('✅ localStorage中已存在token:', existingToken.substring(0, 50) + '...')
+    } else {
+        console.log('⚠️ localStorage中暂无token，等待A项目发送...')
+    }
+
+    // 向父窗口发送准备就绪的消息
+    if (window.parent !== window) {
+        window.parent.postMessage({ type: 'B_PROJECT_READY' }, '*')
+        console.log('已向A项目发送准备就绪消息')
+    }
+})
+
+onUnmounted(() => {
+    // 清理监听器
+    window.removeEventListener('message', handleMessage)
+})
 </script>
 
 <template>

src/http/index.ts

@@ -27,7 +27,14 @@ const service = axios.create({
 // 请求拦截
 service.interceptors.request.use(
     (config) => {
-        config.headers['Authorization'] = localStorage.getItem('tokenNew')
+        const token = localStorage.getItem('tokenNew')
+        if (token) {
+            config.headers['Authorization'] = token
+            console.log('🔑 请求携带Authorization:', token.substring(0, 50) + '...')
+        } else {
+            console.warn('⚠️ localStorage中没有找到tokenNew')
+        }
+
         // 入参是否加密
         config.headers['encryptRequest'] = VITE_ENV == 'development' ? 'false' : 'true'
         // 数据完整性校验
@@ -50,10 +57,13 @@ service.interceptors.request.use(
                 config.data = data
             }
         }
+
+        console.log('📤 发送请求:', config.method?.toUpperCase(), config.url)
         return config
     },
     (error) => {
-        return error
+        console.error('❌ 请求拦截器错误:', error)
+        return Promise.reject(error)
     },
 )
 const openLoading = () => {
@@ -79,7 +89,8 @@ service.interceptors.response.use(
         } else {
             data = res.data
         }
-        // console.log('🚀 ~ 响应-data:', data)
+        console.log('<27> 收到响应:', res.config.url, '状态码:', data?.code, '数据:', data)
+
         if (data.code == '200') {
             return data
         } else if (data.code == '403') {
@@ -97,6 +108,7 @@ service.interceptors.response.use(
                     )
                 }, 500)
             }
+            return Promise.reject(data)
         } else if (data.code == '401') {
             ElMessage.error('请重新登录')
             localStorage.removeItem('tokenNew')
@@ -110,19 +122,27 @@ service.interceptors.response.use(
                     )
                 }, 500)
             }
+            return Promise.reject(data)
         } else if (data.code == '500') {
             ElMessage({
                 type: 'error',
                 message: data.msg,
                 duration: 1000,
             })
+            return Promise.reject(data)
         } else {
             return data
         }
     },
     (error) => {
-        // ElMessage.error('请求失败')
-        // console.log('error-异常', error)
+        console.error('❌ 响应拦截器错误:', error)
+        console.error('错误详情:', {
+            message: error.message,
+            response: error.response,
+            config: error.config
+        })
+        ElMessage.error(error.response?.data?.msg || error.message || '请求失败')
+        return Promise.reject(error)
     },
 )