添加生成headers方法到路由创建方法

Question

我需要有关如何改进我的代码的建议。我有一个简单的 class，它从使用 jwt 令牌身份验证的后端获取数据。

export class RepositoryService {

  constructor(private http: HttpClient, private envUrl: EnvironmentUrlService) { }

  public getData = (route: string) => {
    return this.http.get(this.createCompleteRoute(route, this.envUrl.urlAddress), this.generateHeaders());
  }

 
  private createCompleteRoute = (route: string, envAddress: string) => {
    return `${envAddress}/${route}`;
  }
  private generateHeaders = () => {
    return {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "Authorization": `Bearer ${localStorage.getItem("token")}`
        }),
    };
  };

它工作正常，但是当我获得更多的 http 方法时，问题就出现了。我怎样才能更改 createCompleteRoute，这样我就不必在每个 http 方法中都使用 generateHeaders() 了？我想做类似的事情：

private createCompleteRoute = (route: string, envAddress: string) => {
    return `${envAddress}/${route}`, this.generateHeaders();
  }

因此 http 方法可能如下所示：

public getData = (route: string) => {
    return this.http.get(this.createCompleteRoute(route, this.envUrl.urlAddress));
  }

但不知道如何编写有效的函数。

Answer 1

完成您要求的最佳方法可能是将您创建 header 的逻辑带到 拦截器 ，这将 自动将header参数添加到每个http调用。

可能是这样的：

您的拦截器文件（有点像服务，但必须实现 HttpInterceptor:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
} from '@angular/common/http';

// The service/way you use to get your token
import { AuthService } from '../services/auth.service';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
  
  const url="\yourAPI\endpoint";
  
    //  Get your token
    cont myToken = this.authService.getToken(); // or localStorage.getItem("token") or whatever your way to get your token
  
    
    // Add authorization header with token if available   
    if (myToken) {
    
       request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${currentUser.user.api_token}`,
            'Content-Type': 'application/json',
          },
          url,
        });
        
    } 
    
    ...
    }

EXTRA：有关如何添加和更新 header 以及如何使用拦截器拦截请求和响应的更多信息：

Adding & Updating Headers

Intercepting request & responses

添加生成headers方法到路由创建方法

Add generating headers method to route creating method

javascript

authorization

jwt

angular