Angular5中基本授权的安全图像

Question

我有一个基本授权的图像网址,我需要动态加载图像.授权后,图像将作为数据返回.如何使用授权处理此图像.目前我尝试这样

<img [src]=" getImage(res.imageurl) | async" />



  getImage(imageUrl: string): Observable<File> {
   let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa(this.domain + '/' + logindata.username + ':' + logindata.password));
    return this.http
        .get(imageUrl,{headers:headers}, { responseType: ResponseContentType.Blob })
        .map((res: Response) => res.blob());
}

Answer 1

尝试使用授权令牌而不是用户名、密码。

\n\n

喜欢：

\n\n

@Component({\n    template: `\n        <img [src]="img.src + \'?bearer=\' + bearToken"/>\n    `\n})\nexport class FooComponent {\n    img = {\n        src: \'https://angular.io/assets/images/logos/angular/logo-nav@2x.png\'\n    }\n    bearerToken  = \'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\';\n}\n

\n\n

因此，图像链接将像这样创建\n https://domain/assets/images/xyz.png?bearer=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 \xe2\x80\xa6

\n