如何在Spartacus店面中创建并使用自定义API？

以下是符合Spartacus架构规范的落地步骤，和你熟悉的Angular/NgRx逻辑基本兼容，仅部分触发逻辑需要用到Spartacus封装的基础能力：

1. 先定义API调用服务 #

• 首先在你的Spartacus项目环境配置（通常是environment.ts）的occ.endpoints节点下新增自定义API的端点配置，Spartacus会自动拼接OCC基础路径、站点、用户ID等占位符，不用硬编码：

  // environment.ts 配置示例
  occ: {
    baseUrl: 'https://your-hybris-occ-domain.com',
    prefix: '/occ/v2/',
    endpoints: {
      // 新增自定义接口配置，${userId}是Spartacus内置占位符，会自动替换为当前登录用户ID
      customBusinessData: 'users/${userId}/your-custom-api-path'
    }
  }
  

• 新增专属服务封装API调用逻辑，直接注入Spartacus的OccEndpointsService拼接请求地址即可，不需要手动处理鉴权头，Spartacus的全局HTTP拦截器会自动追加当前登录用户的token：

  @Injectable({ providedIn: 'root' })
  export class CustomBusinessDataService {
    constructor(
      private http: HttpClient,
      private occEndpoints: OccEndpointsService
    ) {}
  
    loadCustomData() {
      const url = this.occEndpoints.buildUrl('customBusinessData');
      return this.http.get<CustomApiResponseType>(url);
    }
  }
  

  这里的CustomApiResponseType是你自定义的接口返回数据TS类型，按实际业务定义即可。

2. 接入Spartacus状态管理实现跨页复用 #

Spartacus原生基于NgRx做全局状态管理，直接按标准NgRx逻辑扩展即可，没有额外限制：

• 定义状态标识、状态接口、Action、Reducer、Effect、Selector，和普通Angular项目的NgRx用法完全一致
• 在Effect中监听拉取数据的Action，调用上面封装的CustomBusinessDataService发起请求
• 在你的自定义Feature Module中注册状态：

  @NgModule({
    imports: [
      StoreModule.forFeature(CUSTOM_DATA_FEATURE_KEY, customDataReducer),
      EffectsModule.forFeature([CustomDataEffects])
    ]
  })
  export class CustomDataModule {}
  

3. 配置触发逻辑，满足登录后、刷新后自动调用 #

这部分需要用到Spartacus封装的身份认证监听能力，不用自己手写路由守卫或者登录事件监听：
直接在根模块的初始化逻辑或者根组件构造函数中添加如下订阅逻辑即可：

constructor(
  private authService: AuthService,
  private store: Store
) {
  // 监听用户登录态变化，包含首次登录、刷新页面后自动恢复登录态两种场景
  this.authService.isUserLoggedIn().pipe(
    filter(isLoggedIn => !!isLoggedIn),
    distinctUntilChanged(),
    // 校验是否已经拉取过数据，避免重复调用
    switchMap(() => this.store.select(selectCustomDataIsLoaded)),
    filter(isLoaded => !isLoaded)
  ).subscribe(() => {
    // 触发拉取数据的Action
    this.store.dispatch(loadCustomData());
  });
}

如果需要每次刷新页面强制重新拉取数据，只需要额外监听页面刷新事件，在状态初始化时重置已加载标记即可。

4. 业务页面使用缓存数据 #

在任何需要用到该数据的组件中，直接用Selector从Store中取数据即可，不需要重复调用API：

// 业务组件代码
customData$ = this.store.select(selectCustomData);

模板中直接用async管道订阅即可，数据会在所有页面间共享复用。

补充说明：如果需要用户登出时清空缓存数据，只需要在Reducer中监听Spartacus原生的登出Action，直接重置对应状态即可，不需要额外写监听逻辑。

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