微前端架构下统一身份验证与授权的实战方案

当企业级应用采用微前端架构时，子应用间的身份隔离与权限控制成为核心痛点。传统单体应用的Cookie/Session方案在跨域场景下完全失效，我们需要更优雅的解决方案。

核心问题拆解

1. 认证信息共享：主应用登录后如何让所有子应用识别用户身份
2. 安全边界控制：防止XSS攻击窃取令牌
3. 权限粒度控制：实现功能级/数据级的动态权限
4. 令牌刷新机制：处理JWT过期时的无缝续期

三种主流方案对比

方案一：Cookie+Proxy模式

// 主应用统一设置cookie
const setAuthCookie = (token) => {
  document.cookie = `auth_token=${token}; Domain=.company.com; Path=/; Secure`;
};

优点：

• 兼容性好，子应用无需改造
• 天然防御CSRF（配合SameSite属性）

致命缺陷：

• 无法解决跨顶级域名场景
• 微应用独立部署时Cookie失效

方案二：JWT+LocalStorage

// 主应用登录后存储JWT
window.postMessage({
  type: 'AUTH_SYNC',
  payload: localStorage.getItem('jwt')
}, '*');
 
// 子应用监听消息
window.addEventListener('message', (event) => {
  if(event.data.type === 'AUTH_SYNC') {
    axios.defaults.headers.common['Authorization'] = `Bearer ${event.data.payload}`;
  }
});

安全增强技巧：

1. 使用postMessage的targetOrigin参数限制消息来源
2. JWT设置短期有效期（建议15分钟）
3. 配合HttpOnly Cookie存储刷新令牌

方案三：OAuth2.0隐式流

sequenceDiagram
   主应用->>认证中心: 302重定向到/login
   认证中心-->>用户: 展示登录页
   用户->>认证中心: 提交凭证
   认证中心->>主应用: 回调URL#access_token=xxx
   主应用->>所有子应用: 广播令牌

企业级实践要点：

• 必须启用PKCE增强防御
• 推荐使用Authorization Code Flow替代隐式流
• 令牌应通过window.opener传递而非URL

权限控制进阶方案

动态路由方案

// 主应用获取权限数据后生成路由配置
const filterRoutes = (routes, permissions) => {
  return routes.filter(route => {
    return !route.meta?.permission || 
           permissions.includes(route.meta.permission);
  });
};

组件级权限指令

<template>
  <button v-permission="'order:delete'">删除订单</button>
</template>

<script>
// 全局指令实现
app.directive('permission', {
  mounted(el, binding) {
    if(!store.state.permissions.includes(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
});
</script>

安全防御特别提醒

1. XSS防御：

   • 避免使用eval()/innerHTML
   • CSP策略设置script-src 'self'
   • 所有用户输入必须经过DOMPurify处理

2. CSRF防御：

   • 关键操作要求二次验证
   • 敏感接口使用SameSite=Strict

3. 监控体系：

   • 埋点记录异常令牌使用
   • 设置接口调用频率限制

性能优化技巧

• 令牌压缩：使用jwt-compressor减少Payload体积
• 预校验机制：子应用加载前先校验权限
• 缓存策略：权限数据采用IndexedDB存储

某电商平台实战数据：采用JWT+广播方案后，授权接口响应时间从220ms降至35ms，安全事件减少72%