如何在Angular中借助angular-oauth2-oidc实现认证后重定向至请求URL

要实现认证后返回用户最初请求的受保护路由，需要从路由守卫配置、OAuth初始化逻辑和认证配置三个方面修改：

1. 添加路由守卫保护受保护路由 #

创建一个AuthGuard来拦截未认证用户的访问，并保存目标路由到OAuth的state中：

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

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private oauthService: OAuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    }

    // 保存当前请求的URL到OAuth state，登录后会自动携带该值
    this.oauthService.initLoginFlow(state.url);
    return false;
  }
}

在路由配置中给受保护路由添加该守卫：

// app.routes.ts
import { Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

export const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  // 公共路由无需守卫
  { path: 'login', component: LoginComponent },
  // 受保护路由添加AuthGuard
  { 
    path: 'dashboard', 
    component: DashboardComponent, 
    canActivate: [AuthGuard] 
  },
  // 其他受保护路由同理
];

2. 调整OAuth初始化逻辑 #

修改initializeOAuth函数，使用loadDiscoveryDocumentAndTryLogin替代loadDiscoveryDocumentAndLogin，并在登录成功后跳转到保存的目标URL：

function initializeOAuth(oauthService: OAuthService): Promise<void> {
  return new Promise((resolve) => {
    oauthService.configure(authCodeFlowConfig);
    oauthService.setupAutomaticSilentRefresh();
    
    // 尝试加载发现文档并处理登录回调
    oauthService.loadDiscoveryDocumentAndTryLogin().then((isLoggedIn) => {
      if (isLoggedIn) {
        // 从state中获取用户最初请求的URL，默认跳转至仪表盘
        const targetUrl = oauthService.state || '/dashboard';
        // 执行跳转
        window.location.href = targetUrl;
      }
      resolve();
    });
  });
}

同时修正APP_INITIALIZER的工厂函数，确保返回初始化Promise：

// app.config.ts中APP_INITIALIZER配置
{
  provide: APP_INITIALIZER,
  useFactory: (oauthService: OAuthService) => {
    return () => initializeOAuth(oauthService); // 直接返回Promise，保证初始化完成后再启动应用
  },
  multi: true,
  deps: [OAuthService]
},

3. 完善AuthConfig配置 #

确保你的authCodeFlowConfig启用了state跟踪，并且redirectUri与APP_BASE_HREF匹配：

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

export const authCodeFlowConfig: AuthConfig = {
  issuer: 'https://你的身份提供商地址',
  // 必须与APP_BASE_HREF一致，确保回调地址正确
  redirectUri: window.location.origin + '/matrix',
  clientId: '你的客户端ID',
  responseType: 'code',
  scope: 'openid profile email', // 根据需求调整权限范围
  useSilentRefresh: true,
  silentRefreshRedirectUri: window.location.origin + '/matrix/silent-refresh.html',
  // 关键：启用state来存储跳转目标URL
  useStateForRedirectUri: true,
  clearHashAfterLogin: true,
};

关键说明 #

• initLoginFlow(state.url)会将用户当前请求的URL存入OAuth的state参数，身份提供商认证完成后会将该state带回前端。
• loadDiscoveryDocumentAndTryLogin会自动处理登录回调，并解析state参数。
• 确保身份提供商的后台配置中，已将redirectUri加入允许列表，否则会出现回调失败的情况。

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