使用angular-oauth2-oidc集成WSO2 IS登录后无法跳转指定页面

我在Angular项目中使用angular-oauth2-oidc依赖，通过Authorization Code Flow授权码流程集成WSO2 Identity Server实现用户认证。项目中有一个仅包含登录按钮的登录页，点击按钮会正常跳转至WSO2授权服务器，但完成登录后并未重定向到指定的http://localhost:4200/dashboard页面，而是跳转到空白的http://localhost:4200页面。

相关代码实现 #

OAuth配置与服务 #

const oAuthConfig : AuthConfig = {
   issuer: 'https://localhost:9443/oauth2/token',
   strictDiscoveryDocumentValidation: false,
   redirectUri: 'http://localhost:4200/dashboard',
   postLogoutRedirectUri: 'http://localhost:4200/login',
   tokenEndpoint: 'https://localhost:9443/oauth2/token',
   userinfoEndpoint: 'https://localhost:9443/oauth2/userinfo',
   clientId: '{{clientId}}',
   responseType: 'code',
   scope: 'openid',
   showDebugInformation: true
 }


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

    constructor(private readonly oauthService: OAuthService) {}

    loginWithWso2IdentityServer() {
        this.oauthService.configure(oAuthConfig);
        this.oauthService.loadDiscoveryDocument().then(() => {
          this.oauthService.tryLoginCodeFlow().then(() => {
             if(!this.oauthService.hasValidAccessToken()) {
               // 初始化登录流程
               this.oauthService.initCodeFlow()
             } else {
               this.oauthService.loadUserProfile().then((userProfile) => {
               console.log(JSON.stringify(userProfile));
            })
           }
          })
        })
       }
      }

LoginComponent代码 #

constructor(private wso2: OauthWso2IdentityServerService) {}

  login() {
      this.wso2.loginWithWso2IdentityServer();
  }

login.html代码 #

<button (click)="login()">login</button>

路由守卫AuthGuard #

export class AuthGuard implements CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     if (this.oauthService.hasValidIdToken()) {
         this.router.navigate(['/dashboard']);
         return true;
     }
   return false;
   }
  }

路由配置（app-routing.module.ts） #

{ path: 'dashboard', loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule), canActivate: [AuthGuard] },

问题原因与修复方案 #

1. 重定向URI配置不匹配 #

WSO2 Identity Server客户端配置中的重定向URI必须与Angular的redirectUri完全一致。登录WSO2管理后台，检查对应客户端的重定向URI列表，确保已添加http://localhost:4200/dashboard，且无拼写、大小写或斜杠格式错误。

2. 登录流程逻辑优化 #

当前登录方法存在重复配置、流程触发时机错误的问题，修改服务逻辑如下：

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

  constructor(private readonly oauthService: OAuthService) {
    // 应用初始化时完成配置与基础校验
    this.oauthService.configure(oAuthConfig);
    this.initAuthFlow();
  }

  private async initAuthFlow() {
    await this.oauthService.loadDiscoveryDocument();
    // 自动处理授权码回调，完成登录
    const loginSuccess = await this.oauthService.tryLoginCodeFlow();
    if (loginSuccess && this.oauthService.hasValidAccessToken()) {
      await this.oauthService.loadUserProfile();
    }
  }

  loginWithWso2IdentityServer() {
    if (!this.oauthService.hasValidAccessToken()) {
      this.oauthService.initCodeFlow();
    } else {
      // 已登录则直接跳转至dashboard
      window.location.href = '/dashboard';
    }
  }
}

3. 路由守卫逻辑修正 #

当前守卫的职责边界错误，应仅做权限校验而非主动跳转，修改后：

export class AuthGuard implements CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidIdToken()) {
      // 已登录，允许访问dashboard
      return true;
    }
    // 未登录，跳转至登录页并记录目标路由
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

4. 根路由配置补充 #

根路径无对应路由导致空白页，在app-routing.module.ts中添加根路由跳转规则：

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule), canActivate: [AuthGuard] },
  // 其他路由配置...
];

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