Угловой текстовый редактор загружает запрос изображений не отправляет заголовок авторизации (токен JWT)

Question

У меня проблема с использованием текстового редактора, когда я пытаюсь загрузить изображение на сервер. Я использую токен jwt ... он работает во всех сервисах, но только когда я использую изображение загрузки текстового редактора, он отправляет запрос POST.но без заголовка авторизации https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/ я уже создал JwtInterceptor и установил (клонировал) заголовок авторизации в запрос

я попытался добавить токен в качестве параметра в URL, но это не хорошо!я попытался также добавить заголовки к настройкам изображения, но не повезло также!

this.params.append('Authorization', `Bearer ${this.token}`);
    this.urlSettings = {
      type: 'post',
      url : this.url+'upload/saveFile',
      headers: this.params
    };
    this.imageSettings = {
      saveUrl: this.urlSettings,
      path: this.imageUrl
    };

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        const token = JSON.parse(localStorage.getItem('token'));

        if (token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });
        }

        return next.handle(request);
    }
}

...

<ejs-richtexteditor [insertImageSettings]='imageSettings' [toolbarSettings]='tools'  required formControlName="content_en" ></ejs-richtexteditor>

...

Answer 1

Вам необходимо использовать событие uploading элемента управления загрузчиком в RTE и установить там заголовки для отправки дополнительных заголовков с загрузкой изображения.Чтобы получить доступ к экземпляру элемента управления загрузчиком, свяжите событие toolbarClick и проверьте инструмент вставки изображения, а затем привяжите событие загрузки с помощью экземпляра.См. Код ниже

[html]

    <ejs-richtexteditor #imageRTE id='imageRTE' [(quickToolbarSettings)]='toolbarSettings'  (toolbarClick)='onToolbarClick($event)'>

[ts]

    public onToolbarClick(e: any): void {
      if (e.item != null && e.item.id == "imageRTE_toolbar_Image") { // Checked if image toolbar is clicked 
        let element: any = document.getElementById('imageRTE_upload') // Image uploader element 
        element.ej2_instances[0].uploading = function upload(args) { // Added updating event on image uploader 
          args.currentRequest.setRequestHeader('Authorization', "Bearer ${token}"); // Setting additional headers
        }
      }
    }