将 ui_locales 传递给 Msal Angular Guard

如何解决将 ui_locales 传递给 Msal Angular Guard

我在我的 Angular 应用程序中使用了 Msal Guard。

我的项目中也有本地化。我知道我可以在我的 extraQueryParameters { ui_locales: 'de' } 对象中使用 RedirectRequest，然后我可以将它传递给 msalAuthService.loginRedirect 方法。

但是当用户尝试导航到受保护的页面时，msalGuard 会自动执行登录重定向。我想知道有没有办法以某种方式将 ui_locales 传递给 msalGuard？或者我是否需要编写自己的自定义守卫来做到这一点。

解决方法

我的解决方案是编写我自己的自定义守卫，从 Microsoft 的 github 复制守卫的代码：https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.guard.ts

然后我改编了我复制的课程，首先通过注入语言，我为此提供了语言服务：

 export class MsalLocaleGuard
    implements CanActivate,CanActivateChild,CanLoad {
    private loginFailedRoute?: UrlTree;
    protected subsink = new SubSink();
    currentLanguage: string | undefined;

    constructor(
        @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,private msalBroadcastService: MsalBroadcastService,private authService: MsalService,private location: Location,private router: Router,private languageService: LanguageService
    ) {
        super();
        // Subscribing so events in MsalGuard will set inProgress$ observable
        this.msalBroadcastService.inProgress$.subscribe();

        if (this.languageService.currentName) {
            this.subsink.sink = this.languageService.currentName.subscribe(
                (lang) => (this.currentLanguage = lang)
            );
        }
    }

然后我不得不更改方法 loginInteractively 以将当前语言作为 ui-locales 属性传递。这是我添加的行：extraQueryParameters: { ui_locales: this.currentLanguage }, 整个方法如下所示：

/**
 * Interactively prompt the user to login
 * @param url Path of the requested page
 */
private loginInteractively(state: RouterStateSnapshot): Observable<boolean> {
    // const authRequest = typeof this.msalGuardConfig.authRequest === "function"
    //     ? this.msalGuardConfig.authRequest(this.authService,state)
    //     : { ...this.msalGuardConfig.authRequest };
    if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
        this.authService.getLogger().verbose('Guard - logging in by popup');
        return this.authService
            .loginPopup(this.msalGuardConfig.authRequest as PopupRequest)
            .pipe(
                map((response: AuthenticationResult) => {
                    this.authService
                        .getLogger()
                        .verbose(
                            'Guard - login by popup successful,can activate,setting active account'
                        );
                    this.authService.instance.setActiveAccount(response.account);
                    return true;
                })
            );
    }

    this.authService.getLogger().verbose('Guard - logging in by redirect');
    const redirectStartPage = this.getDestinationUrl(state.url);
    return this.authService
        .loginRedirect({
            redirectStartPage,//...authRequest,...this.msalGuardConfig.authRequest,extraQueryParameters: { ui_locales: this.currentLanguage },} as RedirectRequest)
        .pipe(map(() => false));
}

然后我在 app.module 的 providers 部分使用了这个新的 MsalLocaleGuard。

这不是最佳解决方案，因为当 Microsoft 更新其防护中的代码时，我防护中从 github 复制的代码就会过时。但这是一种解决方法，在有更好的方法之前就足够了。