非Single-SPA微前端架构下共享状态的跨应用访问方案

针对你的场景，这里提供几个安全可行的替代方案，无需将NestJS应用App3集成进single-spa，也不会将敏感信息暴露到浏览器环境：

方案1：通过前端微应用代理传递状态 #

SpaApp1作为能直接访问@org/SharedApp共享状态的前端应用，可在发起GraphQL请求时，将所需的共享状态（如auth token、用户ID）通过加密的HTTP请求头传递给App3。HTTPS协议下请求头会被加密传输，仅前端服务和后端App3可见，不会暴露给普通用户。

前端实现示例（Angular拦截器）： #

// SpaApp1中添加GraphQL请求拦截器
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { SharedStateService } from '@org/SharedApp';

@Injectable()
export class SharedStateInterceptor implements HttpInterceptor {
  constructor(private sharedState: SharedStateService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 从共享状态服务获取所需信息
    const authToken = this.sharedState.getAuthToken();
    const userId = this.sharedState.getUserId();

    if (authToken && userId) {
      // 克隆请求并添加自定义请求头
      const modifiedReq = req.clone({
        headers: req.headers
          .set('Authorization', `Bearer ${authToken}`)
          .set('X-User-ID', userId)
      });
      return next.handle(modifiedReq);
    }
    return next.handle(req);
  }
}

后端实现示例（NestJS）： #

在App3的GraphQL resolver或守卫中，从请求头提取状态信息：

import { ExecutionContext, Injectable } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';

@Injectable()
export class SharedStateExtractor {
  extract(context: ExecutionContext) {
    const ctx = GqlExecutionContext.create(context);
    const request = ctx.getContext().req;
    
    const authToken = request.headers.authorization?.split(' ')[1];
    const userId = request.headers['x-user-id'];
    
    return { authToken, userId };
  }
}

方案2：后端存储同步共享状态 #

将@org/SharedApp中的核心共享状态同步到后端存储（如Redis），App3直接从存储中读取，无需依赖前端传递：

• 当@org/SharedApp的状态更新时（比如用户登录、信息变更），通过SpaApp1调用一个后端接口，将状态写入Redis（需关联用户会话ID）；
• SpaApp1发起GraphQL请求时，将用户会话ID通过请求头传递给App3；
• App3根据会话ID从Redis中查询对应的共享状态。

这种方案适合需要在多个后端服务间共享状态的场景，Redis作为后端存储，完全隔离于浏览器环境，安全性更高。

方案3：基于JWT封装共享状态 #

如果共享状态的核心是用户身份信息和认证凭证，可让@org/SharedApp在登录成功后获取包含用户信息的JWT（由后端认证服务签发），SpaApp1发起请求时携带该JWT：

• App3收到请求后，直接解析JWT获取用户信息、权限等状态内容；
• JWT本身带有签名，可防止篡改，HTTPS传输保证内容不被窃取。

关键说明 #

@org/SharedApp是运行在浏览器中的前端共享应用，其维护的状态存储在前端内存中，后端App3无法直接访问。上述方案通过前端代理传递或后端存储同步的方式，实现了安全的状态流转，同时避免了将App3集成进single-spa的需求。

内容的提问来源于stack exchange，提问作者Simran