Angular集成Keycloak：刷新令牌过期时自动跳转登录页方案咨询

可以通过HTTP拦截器捕获API调用返回的invalid_grant错误，触发Keycloak的登录重定向逻辑，具体步骤如下：

1. 创建HTTP拦截器捕获错误 #

在Angular项目中生成一个拦截器，用来监听所有HTTP请求的响应错误：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { KeycloakService } from 'keycloak-angular';

@Injectable()
export class KeycloakTokenInterceptor implements HttpInterceptor {

  constructor(private keycloakService: KeycloakService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 匹配Keycloak返回的令牌无效错误
        if (error.error?.error === 'invalid_grant' && error.error?.error_description === 'Token is not active') {
          // 登出后跳转登录页
          this.keycloakService.logout().then(() => {
            this.keycloakService.login();
          });
        }
        return throwError(() => error);
      })
    );
  }
}

2. 注册拦截器到Angular模块 #

在app.module.ts中将拦截器添加到HTTP拦截器提供商列表：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { KeycloakTokenInterceptor } from './keycloak-token.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: KeycloakTokenInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 额外优化：主动监听令牌过期事件 #

除了拦截API错误，还可以直接监听Keycloak的令牌过期回调，提前处理过期场景：
在app.component.ts的ngOnInit中添加监听逻辑：

import { KeycloakService } from 'keycloak-angular';

constructor(private keycloakService: KeycloakService) {}

ngOnInit(): void {
  // 监听Keycloak令牌过期事件
  this.keycloakService.keycloakEvents$.subscribe(event => {
    if (event.type === 'onTokenExpired') {
      // 尝试刷新令牌，失败则跳转登录
      this.keycloakService.updateToken(5).then(refreshed => {
        if (!refreshed) {
          this.keycloakService.logout().then(() => this.keycloakService.login());
        }
      }).catch(() => {
        this.keycloakService.logout().then(() => this.keycloakService.login());
      });
    }
  });
}

这样不管是API调用返回令牌无效错误，还是令牌主动过期，都能自动触发登录重定向，解决无后续操作的问题。

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