javascript - 如何为 adal-angular6 配置生成动态数据
问题描述
我目前正在连接到 AAD 和 azure graph api,获取我需要的所有内容,而且非常棒。我的问题是我的“adalConfig”属性是这样写的硬编码:
在 app.module > 进口:
c.MsAdalAngular6Module.forRoot({
tenant: '080werg-1e3r-5dnb-8c3b-e37ttrr8ee8',
clientId: '080werg-080werg-080werg-080werg-080werg',
redirectUri: window.location.origin,
endpoints: {
"https://cloudcrp-client.azurewebsites.net": "080werg- 80werg-
080werg- 080werg- 080werg",
},
navigateToLoginRequestUrl: false,
}),
这对我来说非常糟糕,因为我们有几个客户,他们每个人都需要不同的信息。我想要做的是从服务器获取具有正确详细信息的信息。所以基本上以异步方式使用 .forRoot 。
我找到了这篇文章:https ://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/ 我认为它与什么相关我想实现,但我就是想不通。
解决方案
所以我终于做到了,毕竟这并不难。生病走过我所有的“adal”配置的步骤。请参考以下文章,它有很大帮助: https ://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/
app.module.ts :
export let adalConfig
export function getConfig(){
return adalConfig
}
上述函数将用于(在提供程序部分)为提供程序数组提供 adalConfig 变量。
export function loadConfigurations(connectionService: ConnectionService) {
return () => connectionService.getConfigs().then(((adalConficObj: azureActiveDirectoryModel)=> {
adalConfig = {
tenant: adalConficObj.Tenant,
clientId: adalConficObj.ClientID,
redirectUri: window.location.origin,
endpoints: {
[adalConficObj.EndPoint]: adalConficObj.ObjectID,
},
navigateToLoginRequestUrl: false,
}
}));
}
在上面的函数中,我返回一个函数,它解决了一个 Promise(我将在 APP_INITIALIZER 中使用这个函数,它需要一个 Promise - 否则你会得到一个错误)Promise 来自我的 connectionService,它在我的应用程序中负责用于连接到服务器。getConfigs() 很简单:
getConfigs(): Promise<Object> {
return this.HttpClient.get(this.getURL('GetAzureActiveDirectoryconfiguration')).toPromise()
}
http /httpClient 使用 observables 和订阅,但是因为我想要一个 Promise,所以我使用 .toPromise 函数。
如果您阅读过这篇文章,您会看到我没有使用 forRoot() 启动 MsAdalAngular6Module,因为我想从服务器获取我的所有 adalConfig 信息。
imports: [
c.MsAdalAngular6Module,
],
据我了解,MsAdalAngular6Module 将使用提供者数组中提供的变量来构造 MsAdalAngular6Service(同样,使用 forRoot() 中的硬编码进行插入)
app.modules 中的 providers 数组:
{
provide: APP_INITIALIZER,
useFactory: loadConfigurations,
deps: [ConnectionService], // dependancy
multi: true
},
{
provide: 'adalConfig',
useFactory: getConfig,
deps: []
},
MsAdalAngular6Service
APP_INITIALIZER 基本上停止了app的初始化,直到useFactory中提供的函数完成。下一节,我们使用提供者数组“给”我们的 adalConfig 对象,在它拥有相关数据之后。我们提供变量本身(提供:'adalConfig'),所以这个函数可以返回它(useFactory:getConfig,),因为 getConfig() 不使用传递给它的任何属性,deps: 是多余的。
我真的希望这会有所帮助,如果我有什么不对的地方,请纠正我。
有关更多信息,您可以参考: https ://angular.io/guide/dependency-injection-providers Angular:如何正确实现 APP_INITIALIZER
推荐阅读
- c# - 下面的多级继承如何在 .Net5 中工作?
- c# - WinDivertSharp 库 - 无法访问数据包数据
- java - javax.sql.DataSource-Spring启动
- arrays - 接受一个数字数组并返回最小值,没有 Math.min()
- python - 字典的嵌套字典
- mysql - Mysql触发语句一直报语法错误
- reactjs - 登录后反应导航?
- pytest - 如何仅在 pytest 脚本中运行设置/清理,跳过其中的所有测试用例?
- vuejs2 - vue apollo useQuery refetch 好像出错了
- arduino - 在两个 Arduino Nano 33 BLE Senses 之间发送数据以制作魔杖