Zlpt_Portal/src/App.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>