angular - 如何在 angular 4 应用程序中存储 api 的根 url？

Question

我按照官方教程为Api做了服务，但是Api的绝对url是硬编码在服务中的。

我想将 Api 的基本 url 保留在某个地方，以便我可以在调用之前将它附加到每个服务中的 url 路径。我还需要在构建之前(或构建之后)更改 Api 的基本 url。

我试图将它放在 session 存储中，但这是个坏主意，因为任何人都可以更改它，我的应用程序将开始访问其他域。

所以我对其进行了硬编码，并在 git 上放置了一个推送后 Hook ，以在构建后替换 url。但它更像是一种 hack 而不是解决方案。

我可以在angular的根目录下放置一个文件并将Api url放入json格式吗？并将它包含在每个服务中，这样我就可以从 git 中排除该文件，每个队友和构建服务器都可以拥有自己的具有不同 url 的文件。

推荐的做法是什么？

Answer 1

在 Angular 4.3 发布后，我们有可能使用 HttpClient 拦截器。这种方法的优点是避免导入/注入(inject) API_URL 是所有具有 api 调用的服务。

这是我的基本实现:

@Injectable()
export class ApiUrlInterceptor implements HttpInterceptor {
constructor(@Inject(API_URL) private apiUrl: string) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({url: this.prepareUrl(req.url)});
    return next.handle(req);
  }

  private isAbsoluteUrl(url: string): boolean {
    const absolutePattern = /^https?:\/\//i;
    return absolutePattern.test(url);
  }

  private prepareUrl(url: string): string {
    url = this.isAbsoluteUrl(url) ? url : this.apiUrl + '/' + url;
    return url.replace(/([^:]\/)\/+/g, '$1');
  }
}

InjectionToken 声明:

export const API_URL = new InjectionToken<string>('apiUrl');

提供商注册:

{provide: API_URL, useValue: environment.apiUrl}
{provide: HTTP_INTERCEPTORS, useClass: ApiUrlInterceptor, multi: true, deps: [API_URL]}

环境.ts:

export const environment = {
 production: false,
 apiUrl: 'some-dev-api'
};