如何为NativeScript Image添加认证HTTP请求头？

这个问题我之前也踩过坑！确实Angular的HttpInterceptor只负责拦截通过HttpClient发起的请求，而原生的<img>标签或者Image实例发起的图片请求根本走不到这个拦截器逻辑里，自然带不上认证令牌。下面给你几个不用单独手动加载每个资源的简便方案：

方案一：封装带认证的图片管道（Pipe） #

这个方案只需要修改模板里的src绑定，不用逐个资源改逻辑：

1. 先创建一个自定义管道，用HttpClient带着认证令牌请求图片资源，拿到Blob后转换成ObjectURL：

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, map } from 'rxjs';
import { AuthService } from './auth.service'; // 假设你有获取token的服务

@Pipe({ name: 'authImage' })
export class AuthImagePipe implements PipeTransform {
  constructor(private http: HttpClient, private authService: AuthService) {}

  transform(url: string): Observable<string> {
    const token = this.authService.getToken(); // 从你的认证服务拿token
    const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
    
    return this.http.get(url, { headers, responseType: 'blob' }).pipe(
      map(blob => URL.createObjectURL(blob))
    );
  }
}

2. 在模板里搭配async管道使用：

<img [src]="imageUrl | authImage | async" alt="需认证的图片">

⚠️ 小提醒：记得在组件销毁时调用URL.revokeObjectURL()释放内存，可以在管道里结合takeUntil或者组件的ngOnDestroy钩子处理，避免内存泄漏。

方案二：封装带认证的图片服务（Service） #

如果你的项目里有很多动态创建Image实例的场景，用这个服务替代原生Image更方便：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthImageService {
  constructor(private http: HttpClient, private authService: AuthService) {}

  loadImage(url: string): Promise<HTMLImageElement> {
    const token = this.authService.getToken();
    const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
    
    return this.http.get(url, { headers, responseType: 'blob' }).toPromise().then(blob => {
      const img = new Image();
      img.src = URL.createObjectURL(blob);
      // 图片加载完成后自动释放URL
      img.onload = () => URL.revokeObjectURL(img.src);
      return new Promise((resolve, reject) => {
        img.onload = () => resolve(img);
        img.onerror = reject;
      });
    });
  }
}

然后在组件里直接调用服务：

constructor(private authImageService: AuthImageService) {}

ngOnInit() {
  this.authImageService.loadImage('https://your-api.com/images/avatar')
    .then(img => {
      document.getElementById('avatar-container')?.appendChild(img);
    });
}

方案三：全局拦截XHR请求（快捷但需谨慎） #

这个方法有点“取巧”，但几乎不用改现有代码——直接拦截全局的XMLHttpRequest，给符合条件的请求加认证头：

在app.module.ts的初始化逻辑里加入这段代码：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AuthService } from './auth.service';

export function setupXhrInterceptor(authService: AuthService) {
  return () => {
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method: string, url: string) {
      // 只给自家API域名的请求加头，避免影响第三方资源
      if (url.startsWith('https://your-api.com/')) {
        const token = authService.getToken();
        this.setRequestHeader('Authorization', `Bearer ${token}`);
      }
      return originalOpen.apply(this, arguments as any);
    };
  };
}

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: setupXhrInterceptor,
      deps: [AuthService],
      multi: true
    }
  ]
})
export class AppModule {}

⚠️ 注意：这个方法会拦截所有XHR请求，包括第三方脚本发起的，一定要加域名白名单，避免出现意外冲突。

内容的提问来源于stack exchange，提问作者Ben Morris