背景
主应用通过search路径参数,给子应用传参token。传完之后删除search参数,且不刷新页面
实现
在子应用中的App.vue中
<template>
<el-config-provider :z-index="3000" :locale="zhCn">
<router-view />
</el-config-provider>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { onMounted } from 'vue';
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
if (params.get('access')) {
const [TOKEN, currentNavPoi] = [params.get('access'), params.get('currentNavPoi')];
localStorage.setItem(
'TOKEN',
JSON.stringify({
access_token: TOKEN,
})
);
localStorage.setItem('currentNavPoi', currentNavPoi as string);
}
onMounted(() => {
params.delete('currentNavPoi');
params.delete('access');
url.search = params.toString();
window.history.replaceState(null, '', url.href);
});
</script>