时间戳

首页 > 解决方案 > 如何在 fullcalendar v5 事件 URL 上添加 JWT 标头

angular - 如何在 fullcalendar v5 事件 URL 上添加 JWT 标头

问题描述

我正在尝试让 fullcalendar 与我的 API 一起工作，这需要通过令牌进行身份验证，但我对 Angular 或 Typescript 的了解不足以弄清楚我需要做什么来完成我已经拥有的，所以我目前的实现是不完整的. 我只是不知道我需要做什么才能完成它。

在旧版本中，您可以通过 eventSources 添加标头，但至少在 fullcalendar v5 中，这不再有效。据我了解，我需要传递一个函数来events拦截调用并使用令牌修改标头。我有一个用于 HttpClient 的可注入程序，它会自动将令牌添加到 HttpClient 调用的标头中，但我不确定event函数期望返回的参数是什么，或者如何将响应转换为被它识别。

我的 events.service.ts 中有这个：

public getEvents(start: string, end: string){
    let params = new HttpParams().set("start", start).set("end", end)
    return this.httpClient.get<EventModel[]>(environment.scheduleUrl + 'api/events/', {params: params});
  }

这是通过我现在保留在组件中的方法调用的：

handleGetEvents(info) {
    let response = this.eventsService.getEvents(info.startStr, info.endStr);
    console.log(response);
    return response;
  }

参数用这个events调用最后一个方法：

events: this.handleGetEvents.bind(this),

这确实从服务器检索事件，并且我可以在控制台中看到它们，但与我删除身份验证检查并仅使用 url 时不同events: environment.scheduleUrl + 'api/events/,，它不会将事件填充到日历中。我认为这是因为它没有正确输入，但我不确定，我不确定如何将结果转换为可以识别的类型。

标签： angulartypescriptfullcalendar

解决方案

如Fullcalendar v5的文档events中所述，该选项支持可能返回类似 Promise 对象的函数。你已经有一个 Observable 来获取你的事件，你现在需要将它转换为一个 Promise。要将 Observable 转换为 Promise，可以使用该toPromise方法。

export class AppComponent {
  public calendarOptions = {
    initialView: 'dayGridMonth',
    events: this.fetchEvents.bind(this)
  };

  constructor(private events: EventsService) {}

  public fetchEvents(dateInfo) {
    return this.events.get(dateInfo.start, dateInfo.end).toPromise();
  }
}

EventsService由组成：

@Injectable()
export class EventsService {
  constructor() {}

  /** Return the events for the given span. */
  get(start: string, end: string): Observable<any[]> {
    return of([]); // Remove this and do the query to your backend service with the JWT header
  }
}

See a live demo at https://stackblitz.com/edit/angular-11-new-nciowx?file=src%2Fapp%2Fapp.component.ts

推荐阅读