ASP.NET Core+Angular项目新开标签页需重新登录问题求解

首先明确你找不到OAuthModule的核心原因：ASP.NET Core自带的api-authorization.module已经内部封装了angular-oauth2-oidc的核心依赖，不需要你手动导入原生库的OAuthModule，直接在根模块注册OAuthStorage提供者即可被依赖注入系统自动识别生效。

具体实现步骤 #

1. 首先在app.module.ts中导入依赖并实现storageFactory工厂函数：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OAuthStorage } from 'angular-oauth2-oidc';
import { AppComponent } from './app.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';

// 存储工厂实现
export function storageFactory(): OAuthStorage {
  // 兼容服务端渲染（SSR）场景，无浏览器环境时返回空实现
  if (typeof window === 'undefined') {
    return {
      getItem: (_key: string) => null,
      setItem: (_key: string, _value: string) => {},
      removeItem: (_key: string) => {}
    };
  }
  // 替换默认的sessionStorage为跨标签页共享的localStorage
  return localStorage;
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ApiAuthorizationModule.forRoot({
      // 保持你原有配置不变
    })
  ],
  providers: [
    // 新增该提供者配置即可
    { provide: OAuthStorage, useFactory: storageFactory }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 验证效果：配置完成后重启前端服务，登录状态会存储在localStorage中，同域名下的新标签页可以直接读取到登录凭证，无需重复登录。

安全注意事项 #

• 由于localStorage可以被同域下的任意脚本读取，存在XSS攻击盗取凭证的风险，上线前需要做好XSS防护：配置严格的CSP规则、所有用户输入输出做消毒处理、避免引入不可信的第三方脚本。
• 如果业务安全等级要求极高，可以选择备选方案：基于BroadcastChannelAPI实现多标签页sessionStorage同步，无需将凭证持久化到localStorage，安全性更高。

备选高安全实现方案 #

自定义实现OAuthStorage，内部使用标签页隔离的sessionStorage，同时通过BroadcastChannel同步登录状态到新开标签页：

class CustomOAuthStorage implements OAuthStorage {
  private storage: Storage = sessionStorage;
  private channel = new BroadcastChannel('auth-sync');

  constructor() {
    // 监听其他标签页的凭证同步消息
    this.channel.onmessage = (e) => {
      if (e.data.type === 'auth-token-sync') {
        Object.entries(e.data.payload).forEach(([key, value]) => {
          this.storage.setItem(key, value as string);
        });
      }
    };
  }

  getItem(key: string): string | null {
    return this.storage.getItem(key);
  }

  setItem(key: string, value: string): void {
    this.storage.setItem(key, value);
    // 写入时同步到其他标签页
    const payload = Array.from(this.storage.entries()).reduce((acc, [k, v]) => ({...acc, [k]: v}), {});
    this.channel.postMessage({ type: 'auth-token-sync', payload });
  }

  removeItem(key: string): void {
    this.storage.removeItem(key);
  }
}

// 工厂函数改为返回自定义实现
export function storageFactory(): OAuthStorage {
  if (typeof window === 'undefined') {
    return { getItem: () => null, setItem: () => {}, removeItem: () => {} };
  }
  return new CustomOAuthStorage();
}

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