Angular如何获取AWS Cognito重定向URL的code查询参数并匹配路由

你遇到的不是Angular原生路由的BUG，而是项目中引入的OAuth/OIDC第三方库（最常见为angular-oauth2-oidc）的默认逻辑导致的：这类库为了简化授权流程开发，会自动拦截URL中携带code、state这类OAuth协议标准参数的请求，直接内部接管处理，不会走你定义的路由规则，这也是为什么其他名称的查询参数都可以正常匹配路由，只有code参数会匹配失败。

方案1：关闭OAuth库的自动回调拦截（推荐） #

如果你希望自己处理授权码提取逻辑，只需要在OAuth库的初始化配置中关闭自动回调拦截即可，以最常用的angular-oauth2-oidc库为例：

// 通常位于app.module.ts或者独立的OAuth配置文件中
import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  // 原有配置保持不变，比如issuer、clientId、scope等
  redirectUri: window.location.origin + '/redirect',
  responseType: 'code',
  // 新增以下关键配置，禁止库自动拦截授权回调请求
  skipAutomaticSilentRefresh: true,
  // 部分版本的库可以直接关闭自动回调处理
  disableOAuth2StateCheck: false,
  // 如果不需要OIDC相关能力，也可以开启以下配置
  // oidc: false
};

修改配置后，库就不会再拦截带code参数的/redirect路由，你定义的路由规则可以正常匹配，之后在RedirectComponent中手动提取code参数完成后续换token等流程即可。

方案2：直接使用库的自动回调处理能力 #

如果你不需要自定义回调逻辑，可以直接删掉自定义的/redirect路由，用库自带的回调处理逻辑即可，不需要自己处理code参数：

// 在应用初始化的位置（比如app.component.ts）添加以下逻辑
constructor(private oauthService: OAuthService, private router: Router) {
  this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
    if (this.oauthService.hasValidAccessToken()) {
      // 授权成功，跳转到首页或者用户之前访问的受限页面
      this.router.navigate(['/home']);
      return;
    }
    // 未登录的逻辑处理
  });
}

这种方式下库会自动完成code提取、校验、兑换token的全流程，不需要你做额外开发。

方案3：兜底兼容方案 #

如果上述方案都不适用你的项目场景，可以在Angular应用启动前就拦截处理URL，避开路由匹配的问题：

// app.module.ts中定义应用初始化工厂函数
import { APP_INITIALIZER } from '@angular/core';

export function oauthCodeInterceptorFactory() {
  return () => {
    const currentUrl = new URL(window.location.href);
    const authCode = currentUrl.searchParams.get('code');
    // 判断是授权回调请求
    if (authCode && currentUrl.pathname === '/redirect') {
      // 把授权码临时存储到sessionStorage
      sessionStorage.setItem('oauth_authorization_code', authCode);
      // 重写当前URL，去掉查询参数，避免路由匹配问题
      window.history.replaceState({}, document.title, '/redirect');
    }
    return Promise.resolve();
  };
}

// 在NgModule的providers数组中注册初始化函数
@NgModule({
  // 其他配置不变
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: oauthCodeInterceptorFactory,
      multi: true
    }
  ]
})
export class AppModule {}

之后你在RedirectComponent中直接从sessionStorage中读取存储的code即可。

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