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

Question

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

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

这是上传文件html

<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>

这是设置 JWT 授权的代码

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

此代码开箱即用并正确设置 header 和 uploading/downloading 文件。

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

<div class="form-group">
                <a target="_blank"
                  (click)="onNavigate(element.File)" href="#">{{element.File}}</a>
              </div>

现在我的问题是如何在此页面创建设置授权 header？因为我在这里没有得到 $event。如何在这里调用上面的 onBeforeSend 函数。

Answer 1

由于我没有收到任何回复，因此发布了我的解决方法。

1) 在 Angular 模块中添加 JWT 令牌以获取可用的 JWT 令牌。

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

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

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

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

How to add Authorization in xhr request manually?

xmlhttprequest

jwt

primeng

angular