不能简单理解为「登录前存储在 NgRx Store 里的数据全部永久丢失」。

更准确的结论是：

> 登录前那个 Angular 应用实例中的 NgRx Store 内存对象会被销毁。
> 登录完成并跳回 Composable Storefront 后，会创建一个新的 NgRx Store。
> 但一部分状态会从浏览器存储恢复，另一部分业务数据会从 SAP Commerce Cloud 后端重新加载，因此页面最终可能看起来像数据从来没有丢失过。

需要把「Store 实例是否还存在」和「业务数据是否还能重新得到」分开理解。

## 旧 NgRx Store 实例确实没有了

标准 Authorization Code Flow 会让当前标签页从 Storefront 跳转到 Authorization Server：

```text
Composable Storefront
    ↓
Authorization Server 登录页
    ↓
提交用户名和密码
    ↓
redirect_uri
    ↓
Composable Storefront
```

浏览器离开原 Storefront Document 时，原 Angular 应用所使用的 JavaScript 执行环境会结束。下面这些对象都属于旧应用实例：

```text
Angular Root Injector
NgRx Store
NgRx Effects
Component 实例
Service 实例
RxJS Subscription
普通 JavaScript 变量
当前 DOM
```

跳回 Storefront 后，客户端代码重新执行，Angular 重新 Bootstrap，并创建一个新的 Store 和新的初始 State。Angular Router 的 SPA 内部跳转只更新部分页面，而整页跳转会重新创建应用，这也是两种导航的关键差别。([Angular][1])

因此，假设登录前 Store 里有：

```ts
{
  cart: {
    carts: {
      entities: {
        tempCart123: {
          loading: false,
          value: {
            code: '00008100',
            entries: [...]
          }
        }
      }
    }
  },
  product: {
    details: {...}
  },
  customFeature: {
    draftText: '尚未保存的输入'
  }
}
```

一旦发生整页 OAuth 跳转，这个 JavaScript 对象本身不会跨页面继续存活。登录后看到的是新创建的对象，而不是原对象的延续。

Redux DevTools 中登录前的 Action 时间线，也不属于新 Store 的一部分。即使 DevTools 开启了 Preserve Log，能够在界面中保留旧日志，旧状态树也已经不是当前 Angular 应用正在使用的 Store。

## 但「旧 Store 被销毁」不等于「所有信息永久消失」

Composable Storefront 的数据大致来自四个层次：

```text
一，NgRx Store 内存
二，localStorage、sessionStorage、Cookie 等浏览器存储
三，SAP Commerce Cloud 后端
四，URL、路由参数及 OAuth 回调参数
```

只有第一层一定会随着旧 SPA 实例一起销毁。

第二层、第三层和第四层可以帮助新 Store 重建状态。

所以登录之后经常出现这样的过程：

```text
创建新的空 Store
    ↓
从浏览器存储恢复关键标识
    ↓
处理 OAuth code
    ↓
获得 Access Token
    ↓
设置当前用户 ID
    ↓
重新请求 OCC
    ↓
把返回数据写入新 Store
    ↓
合并匿名购物车与注册用户购物车
```

页面最终又显示原购物车中的商品，并不表示旧 Store 一直活着，而是新 Store 通过持久化标识和后端数据重新构造出了相似的状态。

## Composable Storefront 并不会默认持久化整个 NgRx Store

Composable Storefront 提供 `StatePersistenceService`，用于选择性地把某些状态同步到浏览器存储。它不是自动把整个 Store 做一次完整序列化，而是由具体功能决定保存哪个字段、使用什么 Key、使用哪个上下文以及恢复时派发什么 Action。SAP 的 State Persistence 文档中，购物车示例持久化的是 Active Cart ID，而不是完整 Cart 对象。([SAP GitHub][2])

文档中的逻辑可以简化为：

```ts
protected getCartState(): Observable<{ active: string }> {
  return this.store.pipe(
    select(getMultiCartState),
    map((state) => ({
      active: state.active,
    }))
  );
}
```

保存到浏览器中的内容接近：

```json
{
  "active": "00008106"
}
```

而不是：

```json
{
  "active": "00008106",
  "entities": {
    "00008106": {
      "value": {
        "entries": [],
        "totalPrice": {},
        "user": {},
        "promotions": []
      }
    }
  }
}
```

所以登录后可以恢复的是「活动购物车是哪一个」这样的身份信息，而完整购物车内容通常需要根据这个 ID 重新从 OCC 加载。

当前版本和项目定制可能调整持久化范围，因此最终应以项目实际使用的 `MultiCartStatePersistenceService`、自定义 State Persistence Service 和 Meta Reducer 为准。但官方设计表达得很清楚，State Persistence 是选择性的，不应默认推断整个 NgRx Store 都被持久化。([SAP Help Portal][3])

## 购物车是最典型的例子

登录前可能存在一个匿名购物车：

```text
anonymous user
    ↓
cart GUID = cc5624bb-51a3-4d59-99ba-0595bf2b038d
```

这份购物车真正的数据保存在 SAP Commerce Cloud 后端。NgRx Store 只是浏览器当前缓存的前端表示。

登录跳转前，Composable Storefront 可能在浏览器存储中保留活动购物车 ID 或 GUID。新应用启动后，`MultiCartStatePersistenceService` 从浏览器存储读取该标识。SAP 的相关实现还专门通过 Meta Reducer 在恢复完成前暂时阻止 `ActiveCartService` 错误地使用 `current`，等待持久化的活动 Cart ID 被还原。([SAP GitHub][4])

新 Store 的过程可能接近：

```text
初始状态
cart.carts.entities = {}
cart.carts.index.Active = null

    ↓ 从 storage 恢复匿名 Cart ID

cart.carts.index.Active = anonymousCartGuid

    ↓ OAuth 登录完成

userId = current

    ↓ 加载或创建用户购物车

registered cart = 00008106

    ↓ 合并匿名购物车

anonymous cart → registered cart

    ↓ 更新活动索引

cart.carts.index.Active = 00008106
```

所以截图中出现下面这些 Action 很合理：

```text
[Cart] Clear Cart State
[Cart] Set Active Cart Id
[Cart] Set cart type index
[Cart] Merge Cart
[Cart] Create Cart
[Cart] Create Cart Success
[Cart] Remove Cart
[Cart] Merge Cart Success
[Cart] Set cart data
```

这里的 `Clear Cart State` 说明新流程可能主动清理当前购物车状态，而 `Set Active Cart Id` 又把持久化得到的购物车标识设置回来。后续再通过 OCC 请求和合并流程构建正式用户购物车。

因此，即使登录前 `cart.carts.entities` 中的完整对象随旧 Store 一起消失，购物车中的商品也不会因此从 SAP Commerce Cloud 数据库消失。

## 登录凭证也不主要依赖 NgRx Store

现代 Spartacus 和 Composable Storefront 的用户 Access Token 已经不再存储在 NgRx Store 中。SAP 从 Spartacus 3.0 开始把用户 Token 放在 `AuthStorageService` 中，把 User ID 放在 `UserIdService` 中，而不是放在传统的 `AuthState` 分支里。([SAP GitHub][5])

相关职责大致是：

```text
AuthStorageService
    Token 和 Token 元数据

UserIdService
    当前 OCC User ID

AuthRedirectStorageService
    登录成功后返回哪个页面
```

`AuthStatePersistenceService` 会使用 `StatePersistenceService` 将认证相关数据同步到浏览器存储。SAP 文档说明，Token、User ID 和 Redirect URL 会同步到 `localStorage`，应用再次启动时再读回相应服务。([SAP GitHub][6])

Authorization Code Flow 返回 Storefront 后，Composable Storefront 会处理 URL 中的 Authorization Code，获取 Token，设置 User ID，派发 Login Action，再返回登录前页面。([SAP GitHub][6])

所以登录认证状态本身也不能简单描述为：

```text
旧 NgRx Store 保存 Token
    ↓
登录跳转
    ↓
Token 从旧 Store 复制到新 Store
```

更接近真实实现的是：

```text
OAuth Library
    ↓
AuthStorageService
    ↓
浏览器存储
    ↓
新应用启动后恢复
```

## localStorage 和 sessionStorage 不会因为一次 Redirect 自动清空

`localStorage` 数据与 Origin 绑定，并会跨浏览器会话保存，除非应用代码、浏览器策略或用户主动清除它。([HTML Living Standard][7])

`sessionStorage` 与当前标签页的页面会话绑定，一般可以跨同一标签页的页面导航和重新加载继续存在，直到标签页或相应页面会话结束。([MDN Web Docs][8])

因此，即使浏览器暂时从：

```text
https://storefront.example.com
```

跳到：

```text
https://authorization.example.com
```

再返回：

```text
https://storefront.example.com
```

原 Storefront Origin 对应的 `localStorage` 不会因为中间访问了认证服务器就自动删除。

需要注意，Authorization Server 和 Storefront 属于不同 Origin 时，二者不能随意互读对方的 Web Storage。Storefront 返回自己的 Origin 后，才能再次访问 Storefront Origin 下保存的数据。

## 哪些数据登录后通常能恢复

能够恢复的数据主要分为两类。

一类是显式持久化到浏览器存储的状态，例如：

```text
活动 Cart ID 或 GUID
Base Site
Language
Currency
认证 Token 及元数据
User ID
登录前 Redirect URL
匿名 Consent 状态
项目自定义的持久化字段
```

具体保存范围依赖 Composable Storefront 版本和项目配置。SAP 的 `StatePersistenceService` 支持指定 Key、State Observable、Context、Storage Type 和读取回调，默认可以使用 `localStorage`，也能切换成 `sessionStorage`。([SAP GitHub][2])

另一类是后端保存的业务数据，例如：

```text
匿名购物车
注册用户购物车
愿望清单
用户资料
地址
订单历史
Saved Cart
商品和价格
CMS 页面数据
```

新 Store 可以通过 OCC 再次加载这些数据。它们可能短暂显示为空或 Loading，然后随着 HTTP 响应返回重新填充。

## 哪些数据很可能真的会丢失

如果某份数据只存在于登录前的 NgRx Store，既没有写入浏览器存储，也没有保存到后端，那么它就会随旧应用实例消失。

常见例子包括：

```text
某个自定义 Feature State 中尚未保存的字段
只存在于 Component Store 的临时状态
弹窗是否打开
当前 Tab 选择
未保存的表单内容
前端临时筛选结果
页面局部展开或折叠状态
尚未提交的草稿
某个请求的 loading 标志
某个 Effect 中的临时变量
正在运行的 RxJS 流
当前 Subscription
内存缓存中的对象
```

假设项目自定义了：

```ts
interface QuoteDraftState {
  customerNote: string;
  selectedApprover: string;
  dirty: boolean;
}
```

用户已经输入：

```ts
{
  customerNote: '请在周五之前发货',
  selectedApprover: 'manager01',
  dirty: true
}
```

但这些内容只在 NgRx Store 中，没有调用后端 API，也没有通过 `StatePersistenceService` 写入 Storage。

登录跳转发生后，这些数据就会真正丢失。

新 Store 只能得到 Reducer 定义的初始值：

```ts
{
  customerNote: '',
  selectedApprover: '',
  dirty: false
}
```

## 恢复出来的 State 也不是原对象

即使某个状态被持久化，登录后的状态仍然不是登录前的原内存对象。

假设登录前存在：

```ts
const oldState = {
  activeCartId: '00008106'
};
```

持久化服务把它序列化到 `localStorage`：

```json
{
  "activeCartId": "00008106"
}
```

登录回来后，新应用执行：

```ts
const restoredState = JSON.parse(
  localStorage.getItem('cart') ?? '{}'
);
```

那么：

```ts
oldState === restoredState
```

结果一定是：

```ts
false
```

两者可能包含相同字段和值，但不是同一个 JavaScript 引用，也不属于同一个 Angular 应用生命周期。

这类过程通常称为 Rehydration，也就是为新创建的 Store 恢复必要状态，而不是继续使用旧 Store。

## 登录还会引发用户上下文变化

登录不仅仅是一轮页面重载，还会把用户上下文从：

```text
anonymous
```

切换为：

```text
current
```

这个变化会影响大量依赖 User ID 的数据：

```text
Active Cart
Wish List
User Profile
Address
Payment Details
Order History
Saved Cart
Checkout State
```

即使某些匿名状态能够从 Storage 恢复，也不能原样作为注册用户状态继续使用。Composable Storefront 需要重新判断：

```text
匿名 Cart 是否存在
注册用户是否已有 Cart
是否需要合并
合并后的 Cart Code 是什么
旧匿名实体是否需要移除
Wish List 应该加载哪一份
Checkout 是否应清空
```

所以登录后看到 `Clear Cart State` 并不一定表示出现了错误。它可能是用户上下文切换时的正常清理和重建动作。

SAP 的登录流程在成功获取 Token 后会设置当前用户 ID、派发 Login Action，并继续处理登录前的跳转目标。购物车等用户相关模块会对这一身份变化作出反应。([SAP GitHub][6])

## 可以用一个三层模型理解

登录前的状态可以拆成下面三层：

```text
第一层，瞬时内存状态

NgRx Store
Component State
RxJS Subscription
Service 实例变量

第二层，浏览器持久化状态

localStorage
sessionStorage
Cookie
IndexedDB

第三层，后端业务状态

SAP Commerce Cart
Customer
Wish List
Order
Address
Saved Cart
```

OAuth Redirect 后的结果是：

```text
第一层
全部重新创建

第二层
通常仍然存在，新应用可重新读取

第三层
继续存在，新应用可通过 OCC 再次获取
```

所以最准确的一句话是：

> 登录前 NgRx Store 中仅存在于内存的状态会丢失，但通过 `StatePersistenceService` 保存到浏览器存储的部分状态能够恢复，保存在 SAP Commerce Cloud 后端的业务数据也可以重新加载。登录后的 Store 是一棵新状态树，不是登录前 Store 的延续。

结合前面那张 Redux DevTools 截图，登录后看到的 `00008106` Cart 并不一定是登录前 Cart 对象在内存中幸存下来。更可能的过程是，新 SPA 启动后恢复匿名 Cart 标识，完成用户认证，从 OCC 加载或创建注册用户购物车，再执行 Merge Cart，最后把服务端返回的 `00008106` 写入新 NgRx Store。

[1]: https://angular.dev/tutorials/learn-angular/14-routerLink?utm_source=chatgpt.com "Link to a route with RouterLink"
[2]: https://sap.github.io/spartacus-docs/state-persistence/ "State Persistence - Spartacus Documentation"
[3]: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/eaef8c61b6d9477daf75bff9ac1b7eb4/783909436fcc4b42909fac4cbceef2eb.html?utm_source=chatgpt.com "State Persistence"
[4]: https://sap.github.io/spartacus/miscellaneous/functions.html "storefrontapp documentation"
[5]: https://sap.github.io/spartacus-docs/technical-changes-version-3/ "Technical Changes in Spartacus 3.0 - Spartacus Documentation"
[6]: https://sap.github.io/spartacus-docs/session-management/ "Session Management - Spartacus Documentation"
[7]: https://html.spec.whatwg.org/multipage/webstorage.html?utm_source=chatgpt.com "Window/localStorage"
[8]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage?utm_source=chatgpt.com "Window: sessionStorage property - Web APIs | MDN"


登录前那个 Angular 应用实例中的 NgRx Store 内存对象会被销毁。 登录完成并跳回 Composable Storefront 后，会创建一个新的 NgRx Store。 但一部分状态会从浏览器存储恢复，另一部分业务数据会从 SAP Commerce Cloud 后端重新加载，因此页面最终可能看起来像数据从来没有丢失过。

登录跳转之后，旧的 NgRx Store 会销毁，但业务数据不一定丢失

紫薇堂堂主

编程语言

前端

架构设计

登录跳转会销毁原NgRxStore实例，但关键数据可通过浏览器存储恢复，业务数据从SAP后端重新加载。新Store重建状态，而非延续旧Store。购物车、Token等通过持久化机制保留，而仅存于内存的临时数据会丢失。

数据同步

代码解释

数据库

服务器

路由

OAuth

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

登录跳转之后，旧的 NgRx Store 会销毁，但业务数据不一定丢失-腾讯云开发者社区-腾讯云

登录跳转之后，旧的 NgRx Store 会销毁，但业务数据不一定丢失

登录跳转之后，旧的 NgRx Store 会销毁，但业务数据不一定丢失

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐