Angular5中基本授权的安全图像

发布时间：2020-12-17 10:25:05 所属栏目：安全来源：网络整理

导读：我有一个基本授权的图像网址,我需要动态加载图像.授权后,图像将作为数据返回.如何使用授权处理此图像.目前我尝试这样 img [src]=" getImage(res.imageurl) | async" / getImage(imageUrl: string): ObservableFile { let headers = new HttpHeaders();header

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

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

尝试使用授权令牌而不是用户名,密码.

喜欢：

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

所以图像链接会像这样创建
https://domain/assets/images/xyz.png?bearer=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 …

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!