拦截FetchBackend的fetch请求以添加授权头

Question

有没有办法拦截FetchBackend的fetch请求来添加授权头？

我尝试使用 HttpInterceptor 拦截这些获取请求，但它似乎不起作用，因为 FetchBackend 不使用 HttpClient 接口

Answer 1

如果您使用 FetchBackend，您的提供商中可能有

provideHttp(withFetch())

。

如果你想设置拦截器

export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
  HttpHandlerFn) => {
     const userToken = 'MY_TOKEN'; const modifiedReq = req.clone({
       headers: req.headers.set('Authorization', `Bearer ${userToken}`),
     });
 
     return next(modifiedReq);
};

可以用作

provideHttpClient(withFetch(), withInterceptors([authenticationInterceptor]))

Answer 2

如果您在 Web 应用程序上下文中使用

FetchBackend

并且想要拦截和修改提取请求，您可以利用 JavaScript 中内置的

fetch

API 添加授权标头。

以下是如何拦截全局获取请求并添加授权标头的示例：

// Define your interceptor function
const interceptFetch = (url, options) => {
  // Add your authorization header logic here
  const token = 'your-access-token'; // Replace with your actual token
  options.headers = {
    ...options.headers,
    Authorization: `Bearer ${token}`,
  };

  // Call the original fetch function
  return fetch(url, options);
};

// Override the global fetch function with your interceptor
window.fetch = (function(originalFetch) {
  return function(url, options) {
    // Call your interceptor before the original fetch
    return interceptFetch(url, options);
  };
})(window.fetch);

此代码片段覆盖了全局

fetch

函数，添加了一个拦截器，该拦截器在发出实际的获取请求之前修改标头。确保将

'your-access-token'

替换为您的实际授权令牌。

注意：修改全局

fetch

函数是一种强大但也有点激进的方法。它会影响您的应用程序发出的所有获取请求。如果您需要更细粒度的控制，或者您在更复杂的环境中工作，您可能需要探索使用 HTTP 拦截器库或自定义 HTTP 客户端。

如果您使用的特定库或框架提供了自己的 HTTP 客户端（例如 Angular 的

HttpClient

或 Axios），则应查阅该库的文档以了解拦截和修改请求的适当方法。