Как добавить Авторизацию в xhr запросе вручную? - PullRequest
0 голосов
/ 17 июня 2019

Я использую элемент управления primeng для загрузки файла. Для загрузки / скачивания / удаления это работает отлично. Теперь мое требование - показать файл на другой странице в виде гиперссылки, и пользователь может щелкнуть и загрузить файл.

Мы используем заголовок авторизации для аутентификации. Я не уверен, как установить заголовок авторизации вручную.

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

Этот код работает из коробки, правильно настраивает заголовок и загружает / скачивает файл.

Теперь на другой странице пользователь пытается загрузить файл, и я реализовал его следующим образом

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

Теперь мой вопрос: как создать набор заголовков авторизации на этой странице? Потому что я не получаю $ событие здесь. Как вызвать выше onBeforeSend функцию здесь.

1 Ответ

0 голосов
/ 19 июня 2019

Так как я не получил ответа, следовательно, отправил, как я разрешаю это.

1) Добавьте токен JWT в модуль Angular для получения доступного токена 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>);
...