将图像 src 的授权标头传递到 Ionic 页面中的远程服务器 [英] Passing authorization header for images src to remote server in Ionic page

问题描述

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

远程网址是这样的:

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

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

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

<p [innerHtml]="myObject?.Body"></p>

"myObject" 是从服务器收到的响应的 JSON 对象.

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

正文"字段可以包含如下内容:

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

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

将 html 从该字段渲染到 Ionic 页面没有问题.

我有一个问题，我的图像没有在那里渲染.

这就是为什么..

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

你能建议一个通用的地方吗，我的所有图像和其他来源(如 html 中的)都应该通过，并且可以将授权标头连同它一起发送到服务器.

我已经在本地存储项中拥有授权令牌.

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

解决方案

1) 创建设置授权头的拦截器

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';从 'rxjs/Observable' 导入 { Observable };@Injectable()导出类 AuthInterceptor 实现 HttpInterceptor {拦截(请求:HttpRequest，下一个:HttpHandler):Observable>{请求 = request.clone({设置标题:{授权:`Bearer <your token>`}});返回 next.handle(request);}}

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

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

import { Pipe, PipeTransform } from '@angular/core';从'@angular/common/http' 导入 { HttpClient };从@angular/platform-b​​rowser"导入 { DomSanitizer, SafeUrl };从 'rxjs/Observable' 导入 { Observable };@管道({名称:'安全'})导出类 SecurePipe 实现 PipeTransform {构造函数(私有http:HttpClient，私有消毒剂:DomSanitizer){}变换(网址):可观察的{返回 this.http.get(url, { responseType: 'blob' }).map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));}}

3) 使用它

<img [attr.src]="'您的链接' ​​| 安全 | 异步"/>

I have an Ionic app where it fetches the data from remote server and displays it on Ionic html page.

The remote URL is like this:

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

This will give me a JSON object of "content" and will be used further in the html page of Ionic app.

It is being used like this on html page inside Ionic app:

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

"myObject" is the JSON object of response received from the server.

The "Body" field contains the HTML to be displayed in the paragraph. This "HTML" field is being returned from server only along with the entire "content" object.

"Body" field can have content like this:

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

You can see from the above example that the images are there in that html.

I have no issue rendering the html from that field to Ionic Page.

I have one issue here that my images are not being rendered there.

Here is why..

My app is locked for Guest users so for each request I need to send an Authorization header in order to authenticate it and in this case all the images are not able to render because each image request will be treated as guest here for server.

Can you suggest a common place where all my images and other sources like there in html should pass through and can send authorization header along with it to server.

I already have the Authorization Token in local storage item.

My goal is to send authorization header to each external source (image here) present in that Body field when it renders in Ionic app.

解决方案

1) Create interceptor which sets authorization header

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);
    }
}

Instead of <your token> you should inject your AuthService into this interceptor, for example this.authService.getToken(), which loads token from local storage.

2) Implement "secure" pipe which gets image as blob and creates an object url of that blob that can be used in the src attribute

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) Use it

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

这篇关于将图像 src 的授权标头传递到 Ionic 页面中的远程服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！