Tencent
子应用和主应用sessionStorage隔离问题
1.我现在创建了主应用A，子应用B和子应用C； 2.主应用登录以后会在sessionStorage中存储一个token,供接口鉴权使用，由于应用间的token是隔离的； 3.子应用B/C登录以后也会创建token存储在sessionStorage中，这时候由于sessionStorage未被隔离，导致token被覆盖。 4.在切换子应用BC时，token不会被子应用B或者C识别，导致子应用接口调用报错， 5.子应用B、C之间其他sessionStorage中存储的同名值，也会被覆盖， 有什么好的方案解决该问题吗？
我自己通过插件的方式在主应用中代理了子应用的appWindow.sessionStorage, 通过增加前缀的方式将子应用的session隔离，不知道官方是否支持session隔离的配置？或者后续会不会支持
setupApp({
name: 'lams-admin',
url: http://localhost:8531/,
plugins: [
{
jsBeforeLoaders: [
{ content: 'console.log("js-before-loader-callbacktest")' },
// 执行一个回调，打印子应用名字
{
callback(appWindow) {
initProxySession(appWindow, appWindow.__WUJIE.id)
},
},
],
},
],
})
具体的代理代码：-------------------------------------
const isProxySessionMap = new Map()
// 创建代理处理程序
export const initProxySession = (app: any, prefix: string) => {
if (isProxySessionMap.get(prefix)) {
return
}
const sessionStorageHandler = {
get(target: any, propKey: any) {
// 拦截 getItem 方法
if (propKey === 'getItem') {
return function (key: string) {
const namespacedKey = ${prefix}:${key}
return Reflect.apply(target[propKey], target, [namespacedKey])
}
}
// 拦截 setItem 方法
if (propKey === 'setItem') {
return function (key: string, value: any) {
const namespacedKey = ${prefix}:${key}
return Reflect.apply(target[propKey], target, [namespacedKey, value])
}
}
// 其他属性或方法直接透传
return target[propKey]
},
}
const originalSessionStorage = app.sessionStorage const proxiedSessionStorage = new Proxy(originalSessionStorage, sessionStorageHandler) isProxySessionMap.set(prefix, true) Object.defineProperty(app, 'sessionStorage', { value: proxiedSessionStorage, writable: false, configurable: true, }) }
主应用代理子应用的 sessionStorage 操作，给每个子应用 key 拼接 prefix 进行读写
大佬，可以贴一下代码吗？ 参考学习一下，谢谢了
主应用代理子应用的 sessionStorage 操作，给每个子应用 key 拼接 prefix 进行读写
大佬，可以贴一下代码吗？ 参考学习一下，谢谢了 上边的评论就是代码，这个是代理的方法：initProxySession， 这是用法
jsBeforeLoaders: [ { content: 'console.log("js-before-loader-callbacktest")' }, // 执行一个回调，打印子应用名字 { callback(appWindow) { initProxySession(appWindow, appWindow.__WUJIE.id) }, }, ],
