[英]How can I get a mapbox access token from a backend server instead of hardcoding it in the module import statement?
I have a backend server that has my mapbox access token encrypted. 我有一个后端服务器加密了我的mapbox访问令牌。 I have an api endpoint that decrypts and returns the access token, (this is protected by a login system). 我有一个api端点解密并返回访问令牌(这是由登录系统保护)。 Basically, I want to send an http request to retrieve this token instead of specifying it in the mapPage.module.ts file. 基本上,我想发送一个http请求来检索此令牌,而不是在mapPage.module.ts文件中指定它。
I have looked around various threads and can't seem to find references in relation to ionic, there seems to be a lot of react examples out there. 我已经查看了各种线程,似乎无法找到与离子有关的参考文献,似乎有很多反应例子。
This was one of the threads I read that seemed to be the closest to what I want, but it isn't using mapbox. 这是我读过的一个似乎最接近我想要的线程,但它没有使用mapbox。
https://github.com/SebastianM/angular-google-maps/issues/882 https://github.com/SebastianM/angular-google-maps/issues/882
@NgModule({
declarations: [
HomePage,
MapToIterablePipe
],
imports: [
IonicPageModule.forChild(HomePage),
ComponentsModule,
NgxMapboxGLModule,
HttpModule
NgxMapboxGLModule.withConfig({
accessToken: 'my-token-here'
})
]
})
export class HomePageModule {}
I just want to remove the declaration from here and have it specified after the user has logged in to the application. 我只是想从这里删除声明并在用户登录到应用程序后指定它。
Expected flow. 预期的流量。 User opens app -> enters login credentials -> login is performed -> access token is fetched from server -> map loads with the access token. 用户打开应用程序 - >输入登录凭据 - >执行登录 - >从服务器获取访问令牌 - >使用访问令牌加载地图。
So I managed to figure it out. 所以我设法搞清楚了。
After the authentication passed, I fetched the token from the backend server and saved it into an injectable service. 身份验证通过后,我从后端服务器获取令牌并将其保存到可注射服务中。
import { Injectable } from '@angular/core';
@Injectable()
export class StorageService {
private mapboxToken: string;
public setMapboxToken(newValue) {
if( newValue != null) {
this.mapboxToken = newValue;
}
}
public getMapboxToken() {
return this.mapboxToken;
}
}
Then I injected that service into the page that was displaying the map. 然后我将该服务注入到显示地图的页面中。 I set up a getter function on the page that returned the value from the storage service. 我在页面上设置了一个getter函数,它从存储服务返回值。
export class HomePage {
map;
mapCenterCoords = [0, 0];
constructor(public storage: StorageService) {
}
public get mapboxToken() {
return this.storage.getMapboxToken();
}
}
In the page html when I set up the map object, there is a property for the access token. 在我设置地图对象的页面html中,有一个访问令牌的属性。 I just set this to the getter function in the .ts file. 我只是将它设置为.ts文件中的getter函数。
<ion-content class='background'>
<mgl-map id='map'
[accessToken]="mapboxToken"
[style]="'mapbox://styles/mapbox/dark-v9'"
[zoom]="[15]"
[center]='mapCenterCoordinates'
(load)="map = $event"
>
</ion-content>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.