我经历了几个问题,比如1 , 2但我不知道如何让我的应用程序运行。
Problem:当我第一次登录时,我没有得到Bearer token
因此我的SettingConfigService
失败了401
,如果我刷新页面,我会从以下位置获取令牌this.oauth.getAccessToken()
因为现在令牌在localstorage
.
我在用oauth 库用于登录。这是我创建的模块和库。
应用程序模块
export function AppConfigurationFactory(config: SettingConfigService) {
return async () => await config.ensureInit(APP_NAME);
}
export class AppConfig {
baseUrl: string;
production: boolean;
}
export const appConfig: AppConfig = {
baseUrl: environment.baseUrl,
production: environment.production,
};
@NgModule({
exports: [],
declarations: [
],
imports: [
....
CustomAuthModule.forRoot(environment.keycloak),
CustomInfrastructureModule.forRoot({ appConfig }),
SharedModule,
],
providers: [
{ provide: AppConfig, useValue: appConfig },
...
{
provide: APP_INITIALIZER,
useFactory: AppConfigurationFactory,
deps: [ SettingConfigService, HttpClient, TranslateService, OAuthService],
multi: true,
},
],
})
export class AppModule {}
CustomAuthModule.ts
import { NgModule, APP_INITIALIZER, Optional, SkipSelf, ModuleWithProviders, InjectionToken } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { OAuthModule, AuthConfig } from 'angular-oauth2-oidc';
import { OAuthModuleConfig,CustomAuthConfigParams } from './auth.config';
import { AuthConfigService } from './auth.service';
export function init_app(authConfigService: AuthConfigService) {
return () => authConfigService.initAuth();
}
@NgModule({
imports: [HttpClientModule, OAuthModule.forRoot()]
})
export classCustomAuthModule {
constructor(@Optional() @SkipSelf() parentModule:CustomAuthModule){
if(parentModule){
throw new Error('QontrolAuthModule is already loaded.');
}
}
static forRoot(keycloakParams): ModuleWithProviders<QontrolAuthModule> {
return {
ngModule:CustomAuthModule,
providers: [
AuthConfigService,
OAuthModuleConfig,
{
provide: AuthConfig,
useValue: keycloakParams
},
{
provide: APP_INITIALIZER,
useFactory: init_app,
deps: [AuthConfigService],
multi: true,
}, ]
}
}
}
自定义基础设施模块.ts
@NgModule({
declarations: [],
imports: [CommonModule],
exports: [],
providers: [],
})
export class CustomInfrastructureModule {
static forRoot(conf?: {
appConfig: SharedInfrastructureAppConfig;
}): ModuleWithProviders<CustomInfrastructureModule> {
return {
ngModule: CustomInfrastructureModule,
providers: [
{ provide: APP_CONFIG, useValue: conf.appConfig },
{
provide: LOCALE_ID,
deps: [SettingConfigService], // some service handling global settings
useFactory: (config: SettingConfigService) => config.culture
},
],
};
}
}
设置配置服务
@Injectable({providedIn: 'root'})
export class SettingConfigService {
culture: string;
config: any;
constructor(
private httpClient: HttpClient,
@Inject(APP_CONFIG) protected appConfig: SharedInfrastructureAppConfig,
private oauth: OAuthService
) { }
async ensureInit(clientPrefix: string): Promise<void>{
console.log(this.oauth.getAccessToken()); //<-- comes as null when 1st login
// putting a wait time of 1 sec as per https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep makes it work,
// because by that time, we have the token in localStorage
const response = await this.httpClient.get<any>(`${this.appConfig.baseUrl}/configs`).toPromise();
this.config = response;
}
}
这是我的代码,它使用以下方式获取令牌oauth2-oidc
这是从调用的
认证配置服务
async initAuth(): Promise<any> {
return new Promise((resolveFn, rejectFn) => {
this.oauthService.configure(this.authConfig);
// Redirect to path, if there is one
if (window && window.location && window.location.pathname) {
this.oauthService.redirectUri = window.location.origin + window.location.pathname;
}
this.oauthService.setStorage(localStorage);
this.oauthService.tokenValidationHandler = new NullValidationHandler();
this.oauthService.events
.pipe(
filter((e: any) => {
return e.type === 'token_received';
})
)
.subscribe(() =>
this.handleNewToken() // <-- this takes time to get triggered and meanwhile
// the call to SettingConfigService is made
);
this.oauthService.loadDiscoveryDocumentAndLogin().then((isLoggedIn) => {
if (isLoggedIn) {
this.oauthService.setupAutomaticSilentRefresh();
resolveFn(() => {});
} else {
console.log(this.oauthService.getAccessToken())
this.oauthService.initImplicitFlow();
console.log(this.oauthService.getAccessToken())
rejectFn();
}
});
});
}
简而言之,
我需要同步APP_INITIALIZER
of app.module.ts
等待令牌APP_INITIALIZER
of CustomAuthModule
,然后它将有一个不记名令牌(由拦截器添加)。我的理解正确吗?请帮忙