使用 AutoLoginPartialRouteGuard 和 checkAuth() 的 Angular 17 OIDC 设置中的无限循环在使用哈希重定向 URI 时失败

Question

我正在开发一个 Angular 17 独立应用程序，该应用程序使用

angular-auth-oidc-client

版本的 18.0.1 进行 OIDC 身份验证。该应用程序在 http://localhost:4200 上运行，我已配置 app.config.ts，如下所示。我已经在路由上实现了 AutoLoginPartialRouteGuard，除了我的回调路由，因为这是我的redirect_uri。

OIDC认证重定向后出现问题。应用程序陷入重定向 URI 上的无限循环，其中 URL 中包含哈希 (http://localhost:4200/callback#access_token=fads798asd7as9)。

在我的

callback.component.ts

oidcService.checkAuth()

中始终返回 false。有趣的是，相同的配置在另一个存储库中可以正常工作，我不确定是什么导致了这里的问题。

app.config.ts

 ProvideAuth({
  config: {
    authority: "{authority_url}",
    redirectUrl: `${window.location.origin}/callback`,
    postLogoutRedirectUri: window.location.origin,
    clientId: "MyClient",
    scope: "openid profile email offline_access",
    responseType: "id_token token",
    silentRenew: true,
    useRefreshToken: true,
    silentRenewUrl: `${window.location.origin}/silent-renew.html`,
    renewTimeBeforeTokenExpiresInSeconds: 30,
    logLevel: LogLevel.Debug,
    startCheckSession: true,
    customPramsAuthRequest: {
      auth_method: oidc.authMehtod,
      realm: oidc.realm,
      ttl: oidc.ttl,
    },
  },
});

app.routes.ts

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AutoLoginPartialRouteGuard], // Guard applied for authenticated routes
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AutoLoginPartialRouteGuard], // Securing the dashboard with the guard
  },
  {
    path: 'callback',
    component: CallbackComponent, // Callback route for handling redirections
  },
  {
    path: '**',
    redirectTo: '', // Catch-all route
  }
];

callback.component.ts

 ngOnInit(): void {
    this.oidcService.checkAuth().subscribe((result) => {
      if (result.isAuthenticated) {
        // If the user is authenticated, redirect to the desired page (e.g., dashboard)
        this.router.navigate(['/dashboard']);
      } else {
        // Handle cases where authentication fails
        console.log('User is not authenticated');
        // Optionally redirect to a login page or show an error message
        this.router.navigate(['/']);
      }
    }, (error) => {
      // Handle errors during the authentication check
      console.error('Error during authentication check', error);
      this.router.navigate(['/']);  // Redirect to home or a login page
    });
  }
}

Answer 1

也许可观察对象返回的是布尔值而不是对象，因此，您会收到控制台错误并重定向，因为重定向发生，您无法看到 console.error。

参考Github项目

 ngOnInit(): void {
    this.oidcService.checkAuth().subscribe((isAuthenticated) => { // <- changed here!
      if (isAuthenticated) { // <- changed here!
        // If the user is authenticated, redirect to the desired page (e.g., dashboard)
        this.router.navigate(['/dashboard']);
      } else {
        // Handle cases where authentication fails
        console.log('User is not authenticated');
        // Optionally redirect to a login page or show an error message
        this.router.navigate(['/']);
      }
    }, (error) => {
      // Handle errors during the authentication check
      console.error('Error during authentication check', error);
      this.router.navigate(['/']);  // Redirect to home or a login page
    });
  }