Angular集成oauth2-oidc与Keycloak首次登录报Invalid token specified错误

问题场景 #

采用Angular独立组件模式，使用oauth2-oidc库对接Keycloak做认证，存在注册页等无需认证的路由，无法通过APP_INITIALIZER直接触发登录跳转。当前通过setTimeout结合NgRx Store判断是否在注册页来控制登录逻辑，但首次登录时会抛出"Invalid token specified"错误——会话存储已有Keycloak的access_token等数据，但无法立即获取，刷新页面后恢复正常。

核心问题分析 #

1. 每次调用performLogin都重复配置OAuthService，导致认证状态混乱
2. setTimeout延迟了OAuth初始化时机，与路由、Store状态同步存在时序问题
3. 依赖NgRx Store的页面状态判断，在应用启动初期可能未同步完成，导致逻辑判断偏差

解决方案 #

1. 优化认证服务，避免重复初始化 #

修改认证服务，将OAuthService的配置移到构造函数中，仅初始化一次，避免重复配置导致的状态冲突：

// auth-service
import { Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { oauthConfig } from './auth-config';

@Injectable({
  providedIn: 'root'
})
export class ClientAuthService {

  constructor(private oauthService: OAuthService) {
    // 仅初始化时配置一次OAuth参数
    this.oauthService.configure(oauthConfig);
    // 提前加载Keycloak发现文档，减少登录时的异步操作
    this.oauthService.loadDiscoveryDocument().catch(err => console.error('加载发现文档失败:', err));
  }

  performLogin() {
    // 直接调用登录方法，无需重复配置
    return this.oauthService.login();
  }

  logOut() {
    this.oauthService.logOut();
  }

  // 新增方法：检查当前是否已持有有效token
  isAuthenticated(): boolean {
    return this.oauthService.hasValidAccessToken();
  }
}

2. 用路由守卫替代Store状态判断 #

创建认证守卫，仅对需要认证的路由生效，彻底避免注册页被强制跳转：

// auth.guard.ts
import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { ClientAuthService } from './auth-service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(ClientAuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  } else {
    // 动态设置登录后跳转的目标路由（即用户当前访问的页面）
    authService.oauthService.redirectUri = window.location.origin + state.url;
    authService.performLogin();
    return false;
  }
};

在路由配置中给需要认证的路由绑定守卫：

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
import { authGuard } from './auth.guard';

export const APP_ROUTES: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [authGuard] },
  // 所有需要认证的路由都添加canActivate守卫
  { path: 'register', component: RegisterComponent }, // 免认证路由，无需绑定守卫
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

3. 移除AppComponent中的冗余逻辑 #

删除setTimeout和依赖Store的登录触发逻辑，仅保留认证状态同步到Store的逻辑：

// app.component.ts
import { OnInit } from '@angular/core';
import { ClientAuthService } from './auth-service';
import { Store } from '@ngrx/store';
import { AuthActions } from './auth.actions';

export class AppComponent implements OnInit {
  constructor(private authService: ClientAuthService, private store: Store) {}

  ngOnInit(): void {
    // 初始化时同步认证状态到NgRx Store
    if (this.authService.isAuthenticated()) {
      this.store.dispatch(AuthActions.loginDone());
    }
  }
}

4. 调整OAuth配置的redirectUri #

将redirectUri设为应用根路径，配合守卫动态调整跳转目标：

// auth-config.ts
import { AuthConfig } from "angular-oauth2-oidc";

export const oauthConfig: AuthConfig = {
  issuer: 'http://localhost:8083/realms/Plus365-local',
  requireHttps: false,
  redirectUri: window.location.origin, // 改为应用根路径，方便守卫动态修改
  clientId: 'client-frontend',
  scope: 'openid profile email offline_access'
}

方案优势 #

• 彻底避免重复初始化OAuthService，解决token无效的核心问题
• 路由守卫精准控制登录触发时机，完全杜绝免认证路由被强制跳转
• 移除setTimeout，消除异步时序问题，提升应用启动稳定性
• 提前加载发现文档，优化登录流程的响应速度

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