Angular-auth-oidc-client：自动登录重定向到初始页面而不是新选项卡中请求的页面

Question

我在 Angular 14 应用程序中遇到有关打开新选项卡时自动登录行为的 angular-auth-oidc-client 包问题。虽然身份验证过程本身似乎运行正常，但自动登录后的重定向行为存在问题。

库：angular-auth-oidc-client

场景：

用户已登录应用程序的主选项卡。 用户打开一个新选项卡并直接导航到特定页面，例如“我的帐户”。 预期行为： 自动登录后，用户应该被重定向到请求的页面，在本例中为“我的帐户”。

实际行为： 应用程序不会将用户重定向到所请求的页面（“我的帐户”），而是将用户重定向回初始页面（例如主页）。

这种行为对于用户体验而言并不理想，因为它破坏了应用程序内的预期导航流程。

*- 问题：- *

1. 如何有效使用AutoLoginPartialRoutesGuard来确保自动登录后正确重定向？
2. 我应该考虑使用任何替代方法或配置来解决此问题吗？

任何见解或建议将不胜感激。 谢谢！

我尝试实现 AutoLoginPartialRoutesGuard 来处理重定向，但它没有解决问题。我正在寻求有关如何正确配置 AutoLoginPartialRoutesGuard 或任何其他方法的帮助，以确保用户在自动登录后重定向到预期页面，特别是在打开新选项卡时。

路线文件

   RouterModule.forRoot([
      {
        path: '',
        canActivate: [AuthorizationGuard],
        component: MainComponent,
        children: [
          {
            path: '',
            redirectTo: 'overview',
            pathMatch: 'full'
          },
          {
            path: 'orders',
            loadChildren: () => import('./modules/orders/orders.module').then(m => m.OrdersModule),
            canActivate: [AutoLoginPartialRoutesGuard],
          },
          {
            path: '**',
            redirectTo: ''
          }
        ]
      }
    ], {
      useHash: environment.hashRouting,
      scrollPositionRestoration: 'enabled'
    })

身份验证配置

export const httpLoaderFactory = () => {

  const authOptions$: Observable<OpenIdConfiguration> = config$.pipe(
    map((authOptions: AuthOptions) => {
      return {
        authority: authOptions.authEndpoint,
        redirectUrl: 'https://localhost:3000',
        postLogoutRedirectUri: 'https://localhost:3000',
        clientId: authOptions.spaClientId,
        scope: 'openid profile offline_access',
        responseType: 'code',
        secureRoutes: [authOptions.apiEndpoint, authOptions.authEndpoint],
        silentRenew: true,
        useRefreshToken: true,
        ignoreNonceAfterRefresh: true,
        automaticSilentRenew: true,
        disableIdTokenValidation: true,
        autoUserInfo: false
      } as OpenIdConfiguration;
    })
  );
  return new StsConfigHttpLoader(authOptions$);
};

授权守卫

export class AuthorizationGuard implements CanActivate {

  constructor(private authService: AuthService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    return this.authService.isAuthorized().pipe(
      map(isAuthorized => {
        if (!isAuthorized) this.authService.authorize();
        return isAuthorized;
      })
    );
  }
}

Answer 1

要解决您遇到的问题，您可以采取两种方法：

1。 AutoLoginPartialRoutesGuard的使用：

这涉及到在两个地方使用来自 angular-auth-oidc-client 的 AutoLoginPartialRoutesGuard。首先，您需要将其包含在您的路线中，如上所示。其次，您需要在 Angular 应用程序中将其用作守卫。

import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';

constructor(
.....
private autoLoginPartialRoutesGuard: AutoLoginPartialRoutesGuard
.....) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise < boolean | UrlTree > {
return this.authService.isAuthorized().pipe(
    switchMap(isAuthorized => {
        return this.autoLoginPartialRoutesGuard.canActivate(route, state).pipe(
            map(() => {
                if (!isAuthorized) this.authService.authorize();
                return isAuthorized;
            })
        );
    })
)}

此实施将解决您的问题。

2。使用库中的自定义存储：

默认情况下，程序包配置为使用会话存储，这可能不会跨选项卡保留状态。相反，您可以选择使用本地存储来解决问题。为此，您需要创建文档中概述的服务。

示例：

import { Injectable } from "@angular/core";
import { AbstractSecurityStorage } from "angular-auth-oidc-client";

@Injectable()
export class LocalStorageManagerService implements AbstractSecurityStorage {
read(key: string) {
    return localStorage.getItem(key);
}

write(key: string, value: any): void {
    localStorage.setItem(key, value);
}

remove(key: string): void {
    localStorage.removeItem(key);
}

clear(): void {
    localStorage.clear();
  }
}

然后您需要将此服务包含在您的模块的提供程序中。

providers: [
  {
       provide: AbstractSecurityStorage,
       useClass: LocalStorageManagerService
  },
 .....
] 

实施此解决方案将有助于解决您的问题。

感谢您的阅读