如何让angular-oauth2-oidc从同源标签页获取Access Token避免重定向？

针对你的问题，我有两个具体的解决方案，分别对应你的两种需求：

方案一：跨同源标签页共享现有Token（无需重定向） #

angular-oauth2-oidc 默认使用 sessionStorage 存储Token，而sessionStorage是标签页隔离的，所以新标签页无法读取其他标签页的Token。要实现跨标签页共享，只需要将存储机制切换为 localStorage 即可：

修改配置代码 #

在你的configure()方法中，给AuthConfig添加storage属性，指定使用LocalStorageStorage：

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

// ...

configure(): void {
  const config: AuthConfig = {
    issuer: this.config.getIdentityUrl(),
    logoutUrl: this.config.getIdentityUrl() + '/connect/endsession',
    redirectUri: window.location.origin + '/',
    silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
    clientId: 'my_client_id',
    scope: 'openid profile my_api',
    sessionChecksEnabled: true,
    // 关键：切换到localStorage存储
    storage: new LocalStorageStorage()
  };

  this.oAuthService.configure(config);
  this.oAuthService.tokenValidationHandler = new JwksValidationHandler();
  
  // 现在新标签页会直接读取localStorage里的Token，无需重定向
  this.oAuthService
    .loadDiscoveryDocumentAndLogin()
    .then((_) => this.loadUserProfile());
    
  this.oAuthService.setupAutomaticSilentRefresh();
}

注意事项 #

• localStorage 是同源共享的，所以只要用户在同一个浏览器的同源标签页登录过，新标签页就能直接获取Token，完全避免重定向。
• 但要注意XSS风险：如果你的应用存在XSS漏洞，攻击者可以窃取localStorage中的Token。如果对安全性要求极高，建议优先考虑方案二。

方案二：优先尝试静默刷新，失败再重定向 #

如果你不想用localStorage（比如出于安全考虑），可以调整初始化流程，先尝试静默刷新获取Token，只有当静默刷新失败时，再跳转到IdentityServer登录：

修改初始化逻辑 #

替换原来直接调用loadDiscoveryDocumentAndLogin()的代码，改为先检查Token有效性，再尝试静默刷新：

configure(): void {
  const config: AuthConfig = {
    issuer: this.config.getIdentityUrl(),
    logoutUrl: this.config.getIdentityUrl() + '/connect/endsession',
    redirectUri: window.location.origin + '/',
    silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
    clientId: 'my_client_id',
    scope: 'openid profile my_api',
    sessionChecksEnabled: true,
  };

  this.oAuthService.configure(config);
  this.oAuthService.tokenValidationHandler = new JwksValidationHandler();

  // 优先尝试复用现有Token或静默刷新
  this.trySilentLoginOrRefresh()
    .catch(() => {
      // 静默刷新失败，再走正常登录流程
      return this.oAuthService.loadDiscoveryDocumentAndLogin();
    })
    .then(() => this.loadUserProfile());

  this.oAuthService.setupAutomaticSilentRefresh();
}

private trySilentLoginOrRefresh(): Promise<void> {
  // 先检查是否有有效的Token
  if (this.oAuthService.hasValidAccessToken()) {
    return Promise.resolve();
  }

  // 没有有效Token，尝试静默刷新
  return this.oAuthService.silentRefresh();
}

原理说明 #

• 新标签页打开时，会先检查当前存储（默认sessionStorage）中是否有有效Token，如果没有，就触发静默刷新。
• 静默刷新会在后台通过iframe调用IdentityServer，获取新的Token，整个过程用户无感知。
• 只有当静默刷新失败（比如用户会话已过期），才会跳转到IdentityServer登录页面。

额外注意事项 #

1. 确保你的silent-refresh.html页面配置正确，并且在IdentityServer的客户端设置中，将该页面的URL添加到RedirectUris和PostLogoutRedirectUris列表中。
2. 确保IdentityServer客户端的AllowedCorsOrigins包含你的应用域名，避免静默刷新时出现跨域问题。
3. 如果使用方案一，记得在用户登出时，要清理localStorage中的Token，避免其他标签页还能访问已登出用户的Token。

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