526互联

如何给 Spartacus 的 CSR 和 SSR 配置不同的 OCC endpoint

发布时间 2023-11-13 19:21:01作者: JerryWang_汪子熙

SAP 官方文档里，对 Commerce Cloud Composable Storefront 的 occ endpoint 配置说明的例子如下：

provideConfig(
      backend: {
        occ: {
          baseUrl: 'https://some.baseUrl.com'
        },
      },
    }),

那么如果想为 SSR 和 CSR 两种运行方式，配置不同的 occ endpoint 应该怎么操作Network？

思路就是，不传一个硬编码的 baseUrl，而是传一个 factory 进去，然后把 baseUrl 的计算逻辑写入到这个 factory 里：

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { OccConfig, provideConfigFactory } from '@spartacus/core';

function myOccConfigFactory(): OccConfig {
  const platformId = inject(PLATFORM_ID);
  const isBrowser = isPlatformBrowser(platformId);
  const baseUrl = isBrowser
    ? 'https://baseUrl.for.browser'
    : 'https://baseUrl.for.ssr';

  return { backend: { occ: { baseUrl } } };
}

/* ... */
@NgModule({
  providers: [
    /* ... */,
    provideConfigFactory(myOccConfigFactory),
  ]
})

下面逐行解释代码的含义：

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { OccConfig, provideConfigFactory } from '@spartacus/core';

这一部分是代码的导入部分，它导入了一些 Angular 和 Spartacus 相关的模块和依赖项，包括 PLATFORM_ID 来检测运行平台，isPlatformBrowser 用于检测是否在浏览器环境中，以及 OccConfig 和 provideConfigFactory 用于配置 Spartacus 的 OCC（Omni-Channel Commerce）服务。

function myOccConfigFactory(): OccConfig {

这里定义了一个名为 myOccConfigFactory 的函数，它用于创建 OCC 的配置。

  const platformId = inject(PLATFORM_ID);

在这一行，它使用 inject 函数获取了当前应用程序的平台标识 platformId，这个平台标识是 Angular 框架提供的用于区分不同平台的标志。

  const isBrowser = isPlatformBrowser(platformId);

接下来，它使用 isPlatformBrowser 函数来检查当前应用程序是否在浏览器环境中运行，将结果存储在 isBrowser 变量中。

  const baseUrl = isBrowser
    ? 'https://baseUrl.for.browser'
    : 'https://baseUrl.for.ssr';

这一部分根据前面检测的平台，设置不同的 baseUrl。如果在浏览器环境中，它将使用 'https://baseUrl.for.browser'，否则在服务器端渲染（SSR）环境中，它将使用 'https://baseUrl.for.ssr'。

  return { backend: { occ: { baseUrl } } };

最后，函数返回一个对象，该对象包含了 OCC 后端的配置信息，其中 baseUrl 是根据平台设置的不同 URL。

@NgModule({
  providers: [
    /* ... */,
    provideConfigFactory(myOccConfigFactory),
  ]
})

最后，这段代码位于 Angular 模块的装饰器 @NgModule 内。在模块的提供者数组中，使用 provideConfigFactory 函数注册了 myOccConfigFactory，以便在整个应用程序中提供 OCC 配置。

总结一下，这段代码的主要作用是创建一个工厂函数 myOccConfigFactory，该函数用于配置 Spartacus 应用程序的 OCC 后端连接地址。根据当前应用程序的平台（浏览器或服务器端渲染），它会设置不同的 baseUrl，并将这个配置注册到 Angular 模块中，以供整个应用程序使用。这有助于实现跨平台的配置，以确保在不同环境中正确配置 OCC 后端连接。