Question

当我尝试使用jwt令牌将图像上载到服务器时，我在使用文本编辑器时遇到问题...它在所有服务中均有效，但仅当我使用文本编辑器的上载图像时，他发送POST请求但没有授权标头https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/ 我已经制作了一个JwtInterceptor并将Authorization标头设置（克隆）到请求

我试图将令牌作为参数添加到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

您需要在RTE中使用上载程序控件的uploading事件，并在其中设置标题，以便在图像上传时发送其他标题。要访问上载控件的实例，请绑定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
        }
      }
    }

Angular文本编辑器上传图像请求未发送Authorization标头（JWT令牌）

1 个答案: