Angular 8 OIDC客户端-授权超过了最大调用堆栈

Question

我们将这个oidc客户端用于我们的角度前端。

该应用程序应该在另一个应用程序的iframe中(而不是在angular中(-通常用户已经登录到sts，所以我们想尝试立即授权，看看我们是否需要执行"；适当的"；授权与否。

不过还是发生了一些奇怪的事情。

我们使用客户端正常初始化应用程序模块：

export class AppModule {
constructor(private oidcSecurityService: OidcSecurityService, private oidcConfigService: OidcConfigService) {
this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {
// Use the configResult to set the configurations
const config: OpenIdConfiguration = {
stsServer: configResult.customConfig.stsServer,
redirect_url: configResult.customConfig.redirect_url,
client_id: configResult.customConfig.client_id,
response_type: 'code',
scope: "openid profile",
silent_renew: true,
silent_renew_url: 'https://localhost:4200/silent-renew.html',
log_console_debug_active: true,
};
this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
});
}
}

然后在应用程序组件中，我们立即尝试这样授权：

import { Component } from '@angular/core';
import { OidcSecurityService } from 'angular-auth-oidc-client';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public oidcSecurityService: OidcSecurityService) { 
if (this.oidcSecurityService.moduleSetup) {
this.doCallbackLogicIfRequired();
} else {
this.oidcSecurityService.onModuleSetup.subscribe(() => {
this.doCallbackLogicIfRequired();
});
}
}
ngOnInit() {
this.oidcSecurityService.getIsModuleSetup().subscribe(() => {
this.oidcSecurityService.getIsAuthorized().subscribe(auth => {
if (auth === false) {
this.oidcSecurityService.authorize();
}
})
})
}
ngOnDestroy(): void {}
login() {
this.oidcSecurityService.authorize();
}
logout() {
this.oidcSecurityService.logoff();
}
private doCallbackLogicIfRequired() {
this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
}
}

这会导致授权触发，返回到在oidcSecurityService.getIsAuthorized((发出任何值之前尝试再次授权的应用程序，从而导致无休止的循环，导致超出最大调用堆栈。

然而，如果我们只是在应用程序组件中引入一个长时间的延迟，它就会开始像你预期的那样：

ngOnInit() {
this.oidcSecurityService.getIsModuleSetup().subscribe(() => {
this.oidcSecurityService.getIsAuthorized().subscribe(auth => {
if (auth === false) {
setTimeout(() => {
this.oidcSecurityService.authorize();
}, 10000);
}
})
})
}

当然我们会看到与以前相同的行为，只是延迟了10秒，但我们没有为什么为什么超时可以解决问题？我们是不是走错了路？

Answer 1

使用distinctUntilChanged的Piping已经解决了这个问题，尽管我可以在控制台中看到，从库的调试日志中获取IsAuthorized似乎连续发出两个false——我想这就是问题的症结所在，不知道这是否是预期行为。

this.oidcSecurityService.getIsAuthorized().pipe(distinctUntilChanged()).subscribe(auth => {
if (auth === false) {
this.oidcSecurityService.authorize();
}
});