Hybris应用从Accelerator迁移至Spartacus：逐页混合加载实现方案咨询

1. 基础环境准备 #

• 确保 Spartacus 应用已完成与 Hybris 后端的集成，配置好baseSite、语言货币等核心参数，能正常调用后端接口获取数据。
• 保留 Accelerator Storefront 的原有部署状态，确保其路由、功能及数据交互均正常运行。

2. 路由分流核心实现 #

这是逐页迁移的核心，需要在两个 Storefront 间建立精准的路由规则：

方案一：通过 Spartacus 路由守卫做重定向 #

• 为需要保留在 Accelerator 的页面（如购物车页/cart）创建自定义路由守卫，当匹配到目标路由时，直接重定向到 Accelerator 对应的页面地址。
  示例代码：

@Injectable({ providedIn: 'root' })
export class RedirectToAcceleratorGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
    // 替换为你的 Accelerator 购物车页实际地址
    const targetUrl = `http://localhost:9002/electronics/en/USD/cart`;
    return of(this.router.parseUrl(targetUrl));
  }
}

• 在 Spartacus 的路由配置中注册该守卫：

const routes: Routes = [
  // 其他 Spartacus 页面路由
  {
    path: 'cart',
    canActivate: [RedirectToAcceleratorGuard]
  }
];

方案二：通过反向代理（如 Nginx）做路由转发 #

• 用 Nginx 作为统一访问入口，根据请求路径判断转发目标：
  • 匹配商品目录页/Open-Catalogue/**这类 Spartacus 负责的路径，转发到 Spartacus 服务端口（如4200）。
  • 匹配购物车页/cart这类 Accelerator 负责的路径，转发到 Accelerator 服务端口（如9002）。
    示例 Nginx 配置片段：

server {
    listen 80;
    server_name localhost;

    location ~ ^/electronics-spa/en/USD/Open-Catalogue/ {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
    }

    location ~ ^/electronics-spa/en/USD/cart {
        proxy_pass http://localhost:9002/electronics/en/USD/cart;
        proxy_set_header Host $host;
    }
}

3. 跨页面状态一致性处理 #

• 用户会话同步：基于 Hybris 的 OAuth2 令牌机制，实现 Spartacus 和 Accelerator 的会话共享。Spartacus 登录后将令牌同步到 Accelerator 的 Cookie 中，反之亦然，避免用户切换页面时重复登录。
• 核心数据同步：依赖 Hybris 后端统一的购物车、用户信息 API，确保 Spartacus 中操作的商品能实时同步到后端，保证 Accelerator 购物车页的数据一致性。

4. 视觉体验统一 #

• 提取 Accelerator 的核心样式变量（如主题色、字体、间距规则），同步到 Spartacus 的主题配置中，让两个 Storefront 的视觉风格保持一致。
• 统一页面头部（Header）和底部（Footer）：可将 Accelerator 的 Header/Footer 封装成独立组件嵌入 Spartacus，或反向操作，避免用户切换页面时产生视觉割裂感。

5. 迭代迁移与测试 #

• 按页面优先级逐步迁移，每次迁移单个页面后，单独验证路由跳转、数据展示、功能交互是否正常。
• 完成单页验证后，再进行跨页面流程测试（如从 Spartacus 商品页跳转至 Accelerator 购物车页），确保整体流程顺畅。

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