Angular HttpInterceptor 搞乱 Github API 调用

Question

我目前正在实现一个身份验证系统，其中用户登录并从服务器接收 JWT token ，该 token 存储在 localStorage 中。我还编写了一个自定义 HttpInterceptor，它将用户的 token 附加到传出的 HTTP 请求。这适用于本地端点，但我也有一个 GET 请求从 GitHub 的 API 获取每个用户的头像，由于拦截器，这不再有效。我从 GitHub 收到 401 身份验证错误。

这是来自 HttpInterceptor 的代码:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const idToken = localStorage.getItem("access_token");

    if (idToken && req.url.includes("localhost")) {
      const cloned = req.clone({
        headers: req.headers.set("Authorization", `Bearer ${idToken}`)
      });
      return next.handle(cloned);
    } else {
      return next.handle(req);
    }
  }
}

以下是发送到 GitHub 的请求 header :

Accept: application/json, text/plain, */*
Authorization: token ... (removed for privacy)
Content-Type: application/json
Origin: http://localhost:4200
Referer: http://localhost:4200/contacts
User-Agent: ...(removed for privacy)

这是来自 GitHub API 的响应:

Request URL: https://api.github.com/users/...
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: 192.30.253.117:443
Referrer Policy: no-referrer-when-downgrade

下面是获取 GitHub 头像的服务代码:

const githubOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Authorization: "token ..." // removed for privacy
  })
};

@Injectable({
  providedIn: "root"
})
export class ContactServiceService {
  constructor(private http: HttpClient) {}

  ...

  getGithub(user: string): Promise<any> {
    return this.http
      .get<any>(`https://api.github.com/users/${user}`, githubOptions)
      .toPromise();
  }
}

奇怪的是，如果我在 Chrome 网络控制台中双击 HTTP 请求，它会正常运行并返回所需的响应。但无论出于何种原因，HttpInterceptor 都阻止它在我的代码中通过。

非常感谢任何帮助!

Answer 1

这是因为您的应用程序的授权 header 覆盖了 github 的授权 header 。实际上，您试图通过使用此 if 语句 if (idToken && req.url.includes("localhost")) {

检查 url 来避免这种情况

但是，您的 req.headers.set 调用似乎也覆盖了其他请求的 Authorization header 。尝试像这样设置标题:

const cloned = request.clone({
  setHeaders: {
    Authorization: `Bearer ${idToken}`
  }
});