110 lines
3.6 KiB
Vue
110 lines
3.6 KiB
Vue
<script setup lang="ts">
|
||
import { loginNewApi } from 'http/api/home/index'
|
||
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') {
|
||
// 1. 将token存储到localStorage，供axios拦截器使用
|
||
localStorage.setItem('tokenNew', token)
|
||
|
||
// 2. 同步更新Pinia store中的token（重要！路由守卫需要检查这个）
|
||
userStore.setToken(token)
|
||
|
||
console.log('✅ Token已成功保存到localStorage和Pinia store')
|
||
console.log('✅ 后续请求将自动携带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>
|
||
<RouterView />
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
/* 适用于 Webkit 浏览器（Chrome, Edge, Safari, etc.） */
|
||
::-webkit-scrollbar {
|
||
width: 6px; /* 滚动条宽度 */
|
||
height: 8px; /* 水平滚动条高度 */
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
// background: rgba(0, 0, 0, 0.1); /* 滚动条轨道背景颜色 */
|
||
border-radius: 6px; /* 轨道的圆角 */
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #138473; /* 滚动条滑块颜色 */
|
||
border-radius: 6px; /* 滑块的圆角 */
|
||
border: 1px solid rgba(0, 0, 0, 0.1); /* 滑块与轨道的边框 */
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: #0f6e53; /* 鼠标悬浮时的滑块颜色，稍微加深 */
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */
|
||
}
|
||
|
||
body {
|
||
font-size: 16px;
|
||
}
|
||
</style>
|