angular - 将图像 src 的授权 header 传递到 Ionic 页面中的远程服务器

Question

我有一个 Ionic 应用程序，它从远程服务器获取数据并将其显示在 Ionic html 页面上。

远程URL是这样的:

http://foo.com/api/content/1

这将给我一个“内容”的 JSON 对象，并将在 Ionic 应用程序的 html 页面中进一步使用。

它在 Ionic 应用程序内的 html 页面上是这样使用的:

<div class="article-desc">
  <p [innerHtml]="myObject?.Body"></p>
</div>

“myObject”是从服务器接收到的响应的JSON对象。

“正文”字段包含要在段落中显示的 HTML。此“HTML”字段仅与整个“内容”对象一起从服务器返回。

“正文”字段可以有这样的内容:

<p>blah blah <img src="http://foo.com/image/1"/> blah blah <img src="http://foo.com/image/2"/>blah blah blah </p>

您可以从上面的示例中看到图像在该 html 中。

我可以毫无问题地将 html 从该字段渲染到 Ionic Page。

我这里有一个问题，我的图像没有在那里呈现。

这是为什么..

我的应用程序已锁定 guest 用户，因此对于每个请求，我都需要发送一个授权 header 以对其进行身份验证，在这种情况下，所有图像都无法呈现，因为每个图像请求都将在此处被视为服务器的 guest .

你能推荐一个通用的地方吗？我的所有图片和其他类似 html 的源都应该通过这个地方，并且可以将授权 header 连同它一起发送到服务器。

我已经在本地存储项目中拥有授权 token 。

我的目标是在 Ionic 应用程序中呈现时，将授权 header 发送到 Body 字段中存在的每个外部源(此处为图像)。

Answer 1

1) 创 build 置授权头的拦截器

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            setHeaders: {
                Authorization: `Bearer <your token>`
            }
        });

        return next.handle(request);
    }
}

而不是 <your token>你应该将你的 AuthService 注入(inject)这个拦截器，例如 this.authService.getToken()，它从本地存储加载 token 。

2) 实现“安全”管道，将图像作为 blob 并创建可在 src 属性中使用的该 blob 的对象 url

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

@Pipe({
    name: 'secure'
})
export class SecurePipe implements PipeTransform {

    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, { responseType: 'blob' })
            .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
    }

}

3) 使用它

<img [attr.src]="'your link' | secure | async" />