Angular14+angular-oauth2-oidc无法用localStorage存令牌求助

你的问题核心是自定义OAuthStorage的工厂函数未触发，令牌仍存入sessionStorage，根源在于**OAuthModule.forRoot()的默认配置覆盖了你根模块的provider**，或是配置方式不符合库的要求。

解决步骤 #

1. 确认OAuthStorage导入正确性 #

先确保你从angular-oauth2-oidc正确导入目标类型，避免导错包：

import { OAuthStorage } from 'angular-oauth2-oidc';

2. 直接在OAuthModule.forRoot()中配置存储（推荐方案） #

angular-oauth2-oidc的OAuthModule.forRoot()支持直接传入存储配置，这是最可靠的方式，能避免provider覆盖冲突：

// 保留你的工厂函数
export function storageFactory(): OAuthStorage {
  console.log('calling factory method');
  return localStorage;
}

// 在AppModule的imports中修改配置
@NgModule({
  imports: [ 
    HttpClientModule,
    OAuthModule.forRoot({
      storage: storageFactory(),
      // 其他原有配置（如resourceServer）可保留
    })
  ],
  // ...其他模块配置
})
export class AppModule {}

3. 排查OAuthService手动配置的干扰 #

如果你在组件/服务中手动初始化OAuthService时，显式指定了storage: sessionStorage，会直接覆盖你的自定义配置，需要删除该配置或替换为注入的存储：

// 错误示例（会覆盖自定义存储）
this.oauthService.configure({
  // ...其他配置
  storage: sessionStorage, 
});

// 正确写法（使用注入的自定义存储）
constructor(private oauthService: OAuthService, private injector: Injector) {
  this.oauthService.configure({
    // ...其他配置
    storage: this.injector.get(OAuthStorage),
  });
}

4. 简化配置（无额外逻辑时） #

如果只是单纯想用localStorage，不需要工厂函数的额外逻辑，直接用useValue更简洁：

providers: [
  { provide: OAuthStorage, useValue: localStorage }
]

验证方式 #

修改后重启项目，查看控制台是否打印calling factory method，登录后检查浏览器开发者工具的Application面板，确认令牌存入Local Storage而非Session Storage。

内容的提问来源于stack exchange，提问作者Manos Kounelakis