当前位置：首页 > news >正文

qiankun 微前端项目中的 Token 鉴权方案

news 2025/7/8 12:56:30

qiankun 微前端项目中的 Token 鉴权方案

在 qiankun 微前端架构中实现 Token 鉴权需要综合考虑主应用与子应用之间的协作。以下是几种常见的实现方案：

1. 主应用统一管理 Token（推荐方案）

实现方式

主应用存储和管理 Token：

// 主应用 auth.js
let token = localStorage.getItem('token');export const getToken = () => token;
export const setToken = (newToken) => {token = newToken;localStorage.setItem('token', newToken);// 通知所有子应用token更新if (window.__POWERED_BY_QIANKUN__) {window.dispatchEvent(new CustomEvent('token-change', { detail: newToken }));}
};

通过 props 传递给子应用：

// 主应用注册子应用
registerMicroApps([{name: 'sub-app',entry: '//localhost:7101',container: '#subapp-container',activeRule: '/sub-app',props: {getToken: () => getToken(),setToken: (newToken) => setToken(newToken)}}
]);

子应用使用 Token：

// 子应用入口文件
export async function mount(props) {const token = props.getToken();// 初始化axios拦截器setupAxiosInterceptor(props.getToken);
}

2. 全局状态共享 Token

使用 qiankun 的 initGlobalState

主应用初始化：

// 主应用
import { initGlobalState } from 'qiankun';const state = {token: localStorage.getItem('token') || ''
};const actions = initGlobalState(state);actions.onGlobalStateChange((state, prev) => {if (state.token !== prev.token) {localStorage.setItem('token', state.token);}
});export const setGlobalToken = (token) => {actions.setGlobalState({ ...actions.getGlobalState(), token });
};

子应用使用：

export async function mount(props) {// 获取初始tokenconst { token } = props.getGlobalState();// 监听token变化props.onGlobalStateChange((state) => {if (state.token) {// 更新本地axios配置axios.defaults.headers.common['Authorization'] = `Bearer ${state.token}`;}}, true);// 更新tokenconst login = async () => {const newToken = await fetchToken();props.setGlobalState({ token: newToken });};
}

3. 基于 Cookie 的共享鉴权

实现方式

主应用登录后设置 Cookie：

// 主应用登录逻辑
const login = async () => {const { token } = await loginApi();document.cookie = `token=${token}; path=/; domain=.yourdomain.com; max-age=86400`;
};

子应用从 Cookie 读取：

// 子应用axios拦截器
import Cookies from 'js-cookie';axios.interceptors.request.use(config => {const token = Cookies.get('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});

4. 基于路由守卫的鉴权控制

主应用统一控制：

// 主应用路由配置
router.beforeEach(async (to, from, next) => {if (!store.getters.token && to.meta.requiresAuth) {try {const token = await refreshToken();setToken(token);next();} catch (error) {next('/login');}} else {next();}
});

子应用独立鉴权：

// 子应用独立运行时
if (!window.__POWERED_BY_QIANKUN__) {router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !getToken()) {next('/login');} else {next();}});
}

5. 请求拦截器统一处理

主应用封装请求方法：

// 主应用api.js
export const request = async (config) => {const token = getToken();if (token) {config.headers = {...config.headers,Authorization: `Bearer ${token}`};}return axios(config);
};

子应用使用封装方法：

// 子应用通过props使用主应用的request
export async function mount(props) {const { request } = props;const fetchData = async () => {const data = await request({ url: '/api/data' });// ...};
}

6. Token 刷新机制

主应用实现刷新逻辑：

// 主应用token刷新
let isRefreshing = false;
let refreshSubscribers = [];const refreshToken = async () => {if (isRefreshing) {return new Promise(resolve => {refreshSubscribers.push(resolve);});}isRefreshing = true;try {const newToken = await refreshTokenApi();setToken(newToken);refreshSubscribers.forEach(cb => cb(newToken));refreshSubscribers = [];return newToken;} catch (error) {logout();throw error;} finally {isRefreshing = false;}
};

子应用处理401错误：

// 子应用axios拦截器
axios.interceptors.response.use(response => response,async error => {if (error.response.status === 401 && !error.config._retry) {error.config._retry = true;try {const newToken = await props.refreshToken();error.config.headers.Authorization = `Bearer ${newToken}`;return axios(error.config);} catch (refreshError) {props.logout();return Promise.reject(refreshError);}}return Promise.reject(error);}
);

最佳实践建议

统一管理原则：主应用作为鉴权中心，子应用通过接口获取token
安全存储：优先使用HttpOnly Cookie存储敏感token
通信加密：敏感操作应使用加密通道
降级方案：考虑子应用独立运行时的鉴权逻辑
类型安全（TypeScript示例）：

// 主应用类型定义
interface MainAppProps {getToken: () => string | null;setToken: (token: string) => void;refreshToken: () => Promise<string>;logout: () => void;
}// 子应用mount函数
export async function mount(props: MainAppProps) {const token = props.getToken();// ...
}

不同场景下的选择

场景	推荐方案	原因
同域子应用	Cookie共享 + 主应用状态管理	简单安全，天然共享
跨域子应用	主应用props传递	避免跨域问题
需要SSR的子应用	Cookie共享	服务端渲染需要Cookie
高安全要求系统	主应用代理所有API请求	避免token暴露给子应用
多技术栈复杂系统	全局事件总线 + 状态共享	解耦不同技术栈