将图像的授权标头传递给离子页面中的远程服务器

我有一个离子应用程序，它从远程服务器中获取数据并在离子HTML页面上显示。

远程URL就是这样：

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

这将为我提供"内容"的JSON对象，并将在Ionic App的HTML页面中进一步使用。

在Ionic App中的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从该字段呈现到离子页。

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

这就是为什么..

我的应用程序已锁定给访客用户。

您可以建议一个普通的地方，我的所有图像和其他来源（例如HTML中）都应通过并可以将授权标头和它一起发送到服务器。

我已经在本地存储项目中具有授权令牌。

我的目标是将授权标头发送到该身体场中存在的每个外部源（此处），当它在离子应用中呈现时。

1）创建设置授权标题

的拦截器

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注入此拦截器，例如this.authservice.gettoken（），该（从本地存储中加载令牌。

2）实现"安全"管道，将图像作为斑点，并创建可在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" />

态

这个想法是，当您使用<img src="http://foo.com/image/1">时，无法通过授权标题。因此，您会向后端提出发布请求，以要求图像的临时公共链接，然后将此链接作为图像来源。

这是一个示例流

我需要显示" http://foo.com/image/1"
从浏览器中，提出邮政请求以后端，让他们知道您是授权客户端（包括授权标题），并要求提供临时URL，该URL将公开显示图像
从后端产生一个有限时间有效的签名URL，不需要授权标头显示图像。
使用刚收到的临时签名URL作为IMG标签的SRC。

第二选项：下载图像并使用blob url

这个问题的回答将告诉您有关：Dynamic NGSRC请求中的HTTP HTTP Interceptor

这是您写拦截器的方式，

需要扩展一个在Angular 4/5中提供的称为HTTPINTEPTER的类。
覆盖一种称为截然的方法

它将在您的所有http请求中添加标头，这理想情况下，您可能需要放置卫生逻辑，例如，如果您希望与该标头一起提出一定的请求，则可以在Intercept中确定该请求方法。

export class YourInterceptor implements HttpInterceptor{    
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
const NewRequest= req.clone({ headers: req.headers.set(‘Auth-Token’, ‘YourAuthToken’) });

返回next.handle（newRequest）; }

之后，您需要以下面给出的方式将其注册在您的app.module.ts文件中

import { YourInterceptor } from './Your-interceptor';

现在转到@ngmodule部分，在您的提供商数组中执行此操作，它将是如下所示的提供商数组，

providers: [{provide: HTTP_INTERCEPTORS,useClass: YourInterceptor,multi: true}],

现在重新启动您的应用程序，任何http呼叫您都将拥有一个控制内部的控制，您将能够驾驶您的代码。

相关内容

最新更新

热门标签：