使用同一种 token 或 session 的认证方式。在主应用和微应用之间共享认证信息,保证微应用的认证方式与主应用的认证方式一致,从而实现单点登录实现过程
时间: 2024-02-28 08:52:10 浏览: 105
使用同一种 token 或 session 的认证方式,可以在主应用和微应用之间共享认证信息,从而实现单点登录。具体实现过程如下:
1. 在主应用中实现认证功能,生成 token 或 session,并将其保存在 localStorage 或 cookie 中。
2. 在 qiankun 的主应用配置中,将 token 或 session 作为 props 传递给子应用。示例代码如下:
```
const app = createApp({
...
async mounted() {
const token = await fetchToken();
// 将 token 作为 props 传递给子应用
this.$children.forEach(child => {
child.$props.token = token;
});
},
...
});
```
3. 在微应用中获取 token 或 session,进行认证。示例代码如下:
```
const app = createApp({
...
props: {
token: {
type: String,
default: '',
},
},
async mounted() {
const authenticated = await authenticate(this.token);
if (authenticated) {
// 认证成功,进行其他操作
} else {
// 认证失败,跳转到登录页面
}
},
...
});
```
4. 在微应用中,每次路由跳转时,都需要重新进行认证。可以通过路由守卫等方式实现。示例代码如下:
```
router.beforeEach(async (to, from, next) => {
const authenticated = await authenticate(this.token);
if (authenticated) {
next();
} else {
next('/login');
}
});
```
通过以上步骤,就可以实现 qiankun 主应用已登录微应用需要单点登录的功能。需要注意的是,在实现过程中,需要保证 token 或 session 的安全性,避免被恶意截获。
阅读全文