Angular独立组件模式下配置angular-auth-oidc-client自定义存储

要让angular-auth-oidc-client使用你自定义的localStorage存储类，只需在依赖注入中覆盖AbstractSecurityStorage的默认实现即可，步骤如下：

1. 确认自定义存储类的实现 #

确保你的类完整实现AbstractSecurityStorage的所有方法，示例如下：

import { AbstractSecurityStorage } from 'angular-auth-oidc-client';

export class LocalStorageSecurityStorage implements AbstractSecurityStorage {
  read(key: string): string | null {
    return localStorage.getItem(key);
  }

  write(key: string, value: string): void {
    localStorage.setItem(key, value);
  }

  remove(key: string): void {
    localStorage.removeItem(key);
  }

  clear(): void {
    localStorage.clear();
  }
}

2. 在独立组件配置中注入自定义类 #

两种方式任选其一即可：

方式一：在应用根providers中直接提供 #

在main.ts的bootstrapApplication配置里，将自定义存储类作为AbstractSecurityStorage的实现加入providers数组：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth, AbstractSecurityStorage } from 'angular-auth-oidc-client';
import { AppComponent } from './app/app.component';
import { LocalStorageSecurityStorage } from './app/local-storage-security-storage';

bootstrapApplication(AppComponent, {
  providers: [
    provideAuth({
      config: {
        // 填写你的OIDC配置项，示例：
        issuer: 'https://your-oidc-provider.com',
        clientId: 'your-client-id',
        redirectUri: window.location.origin,
        // 其他配置...
      }
    }),
    // 覆盖默认存储实现
    { provide: AbstractSecurityStorage, useClass: LocalStorageSecurityStorage }
  ]
});

方式二：在provideAuth的配置中嵌套providers #

也可以把自定义存储的注入配置放在provideAuth的providers字段里，更贴合库的配置逻辑：

provideAuth({
  config: {
    // 你的OIDC配置项
    issuer: 'https://your-oidc-provider.com',
    clientId: 'your-client-id',
    redirectUri: window.location.origin,
    // 其他配置...
  },
  providers: [
    { provide: AbstractSecurityStorage, useClass: LocalStorageSecurityStorage }
  ]
})

原理说明 #

angular-auth-oidc-client内部通过依赖注入获取AbstractSecurityStorage实例，默认使用SessionStorageSecurityStorage。当你在providers中提供自定义实现类后，Angular的DI系统会优先使用你的类，从而替换默认的sessionStorage存储。

内容的提问来源于stack exchange，提问作者Vincent Gagnon