如何从后端服务器获取mapbox访问令牌，而不是在模块导入语句中对其进行硬编码？

Question

我有一个后端服务器加密了我的mapbox访问令牌。 我有一个api端点解密并返回访问令牌（这是由登录系统保护）。 基本上，我想发送一个http请求来检索此令牌，而不是在mapPage.module.ts文件中指定它。

我已经查看了各种线程，似乎无法找到与离子有关的参考文献，似乎有很多反应例子。

这是我读过的一个似乎最接近我想要的线程，但它没有使用mapbox。

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 {}

我只是想从这里删除声明并在用户登录到应用程序后指定它。

预期的流量。 用户打开应用程序 - >输入登录凭据 - >执行登录 - >从服务器获取访问令牌 - >使用访问令牌加载地图。

Answer 1

所以我设法搞清楚了。

身份验证通过后，我从后端服务器获取令牌并将其保存到可注射服务中。

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;
    }
}

然后我将该服务注入到显示地图的页面中。 我在页面上设置了一个getter函数，它从存储服务返回值。

export class HomePage {
    map;
    mapCenterCoords = [0, 0];
    constructor(public storage: StorageService) {

    }

    public get mapboxToken() {
        return this.storage.getMapboxToken();
    }
}

在我设置地图对象的页面html中，有一个访问令牌的属性。 我只是将它设置为.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>