Angular-oauth2-oidc中Google OAuth2认证守卫始终返回false问题

问题说明 #

使用angular-oauth2-oidc开发Angular项目，采用Google OAuth2隐式授权流实现登录认证，配置AuthGuard保护/home路由后，每次登录回调重定向到/home时，守卫总是返回false并跳回登录页。核心原因是路由守卫在tryLogin捕获URL中的认证令牌之前就被调用，导致服务尚未识别到登录状态。

解决方案 #

将AuthGuard改为异步逻辑，等待认证服务完成初始化（包括捕获回调中的令牌）后再判断登录状态，同时调整认证初始化的时机，确保守卫能获取到正确的登录状态。

1. 修改AuthGuard为异步实现 #

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private oauthService: OAuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // 优先检查已有有效令牌
    if (this.oauthService.hasValidIdToken()) {
      return of(true);
    }

    // 等待认证初始化完成，捕获回调中的令牌
    return this.oauthService.loadDiscoveryDocumentAndTryLogin().pipe(
      switchMap(() => {
        if (this.oauthService.hasValidIdToken()) {
          return of(true);
        }
        // 保存当前目标路由，登录后跳转回来
        this.oauthService.setRedirectUri(state.url);
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }
}

2. 调整AppComponent的认证配置 #

移除AppComponent中的loadDiscoveryDocumentAndTryLogin调用，让守卫统一处理认证初始化：

export class AppComponent {

  constructor(public oauthService: OAuthService) {
    this.configureOAuth();
  }
  private configureOAuth() {
    this.oauthService.configure({
      clientId: 'XXXX.apps.googleusercontent.com',
      issuer: 'https://accounts.google.com',
      redirectUri: window.location.origin + '/home', // 动态获取origin适配不同环境
      scope: 'openid profile email',
      showDebugInformation: true,
      strictDiscoveryDocumentValidation: false, 
      tokenEndpoint: 'https://oauth2.googleapis.com/token',
      loginUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
      jwks: {
        url: 'https://www.googleapis.com/oauth2/v3/certs'
      }
    });
    // 移除此处的 loadDiscoveryDocumentAndTryLogin() 调用
  }
}

3. 优化LoginComponent的跳转逻辑 #

确保登录完成后跳转到用户原本访问的路由：

export class LoginComponent implements OnInit {

  constructor(private oauthService: OAuthService, private router: Router) {
  }

  ngOnInit() {
    if (this.oauthService.hasValidAccessToken()) {
      // 优先跳转到之前保存的路由，默认回到/home
      const targetUrl = this.oauthService.getRedirectUri() || '/home';
      this.router.navigate([targetUrl]);
    }
  }

  login() {
    this.oauthService.initImplicitFlow();
  }
}

4. 路由配置保持不变 #

确保AuthGuard已正确注册到路由：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

关键改动点 #

• 守卫改为异步执行，等待认证初始化完成后再判断状态，确保回调中的令牌被正确捕获。
• 统一认证初始化逻辑到守卫中，避免AppComponent和守卫重复初始化导致的状态不一致。
• 增加目标路由保存功能，提升登录后的用户体验。

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