如何在xhr请求中手动添加授权?

时间:2019-06-17 17:13:53

标签: angular xmlhttprequest jwt primeng

我正在使用primeng控件上传文件。对于上载/下载/删除,它运行完美。现在,我的要求是在其他页面上显示文件为超链接,用户可以单击并下载文件。

我们正在使用Authorization标头进行身份验证。我不确定如何手动设置授权标头。

这是用于上传文件的html

iif(condition, value_if_true, value_if_false)

这是用于设置JWT授权的代码

<div class="form-group">
              <p-fileUpload name="file" uploadLabel="Comfirm" multiple="true"
                url="{{environment.ApiPath}}/api/uploadMultiplefiles"
                (onBeforeSend)="uploadService.onBeforeSend($event)"
                (onUpload)="uploadService.onUpload($event, attachments, 'attachments', msgs)">
                <ng-template pTemplate="content">
                  <div class="ui-fileupload-row" *ngFor="let file of attachments; let i = index;">
                    <div><img [src]="file.objectURL" *ngIf="uploadService.isImage(file)" [width]="previewWidth" />
                    </div>
                    <div class="uploaded-file"
                      (click)="uploadService.downloadFile(attachments, i, 'attachments', msgs)">
                      {{file.uploadname}}</div>
                    <div>
                      <button type="button" class="btn-xs btn-danger confirm-btn"
                        (click)="uploadService.deleteFile(attachments, i, 'attachments', msgs)">Delete</button>
                    </div>
                  </div>
                </ng-template>
              </p-fileUpload>
            </div>

此代码开箱即用,可以正确设置标题并上传/下载文件。

现在其他页面中的用户正在尝试下载文件,而我已经这样实现了

onBeforeSend = function (event) {
    event.xhr.setRequestHeader('Authorization', this.JWT.getValue());
  };

现在我的问题是如何在此页面上创建设置的授权标头?因为我在这里没有$ event。如何在此处 onBeforeSend 函数上方调用。

1 个答案:

答案 0 :(得分:0)

由于我没有任何回应,因此发布了解决方法。

1)在Angular模块中添加JWT令牌,以使JWT令牌可用。

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

2)我刚刚创建了一个标题,当标题打开时,插入授权详细信息作为令牌。

private headers =new Headers({'Content-Type': 'application/json', 'Accept': 'application/pdf'});
xhrReq.open(method, url); //use http.post for Angular way
this.headers.append('authorization', <token>);