Question

我在最新的角度项目中使用ngrx / store。但是我正在努力寻找一种更好的方法来刷新任何页面后保持状态。我将access_token存储在存储中，因此当我刷新时，它不维护令牌，并拦截不带令牌的发送。最终使它成为一个错误的请求。

该怎么办？非常感谢您的帮助。

关于，资深软件工程师

Answer 1

您必须将状态保持在例如浏览器的localStorage中。您可以通过使用meta reducer或效果来实现。

还有一个流行的名为https://github.com/btroncone/ngrx-store-localstorage的库可以准确地做到这一点。

Answer 2

在发出请求之前，您应该将令牌存储在商店中。因此，您应该在访问应用程序组件之前创建令牌解析器，将令牌存储在应用商店中，以确保在发出请求之前令牌可用。

Answer 3

NGRX状态仅保存在内存中。如果您希望它在页面刷新之间保持不变，请选择LocalStorage或sessionStorage。

对于Angular 5：

npm install @ngx-pwa/local-storage@5

在您的RootModule中注册

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

注入并使用

import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

用法

let user: User = { firstName: 'Henri', lastName: 'Bergson' };
this.localStorage.setItem('user', user).subscribe(() => {});

注意：窗口的LocalStorage和@ ngx-pwa LocalStorage之间的区别是，数据将在DEV工具中不可见。

页面刷新后的Redux状态管理

3 个答案: