如何在 fullcalendar v5 事件 URL 上添加 JWT header

Question

我正在尝试让 fullcalendar 与我的 API 一起使用，它需要通过令牌进行身份验证，但我对 Angular 或 Typescript 不够熟悉，无法弄清楚我需要做什么完成我已经拥有的，所以我目前的实施是不完整的。我只是不知道我需要做什么才能完成它。

在旧版本中，您可以通过 eventSources 添加 header，但至少在 fullcalendar v5 中，这不再有效。据我了解，我需要将一个函数传递给 events 以拦截调用并使用令牌修改 header 。我有一个 HttpClient 可注入程序，它会自动将令牌添加到 HttpClient 调用的 header 中，但我不确定 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/,）时不同，它不会' 将事件填充到日历中。我假设那是因为它没有正确输入，但我不确定，我不确定如何将结果转换为可以识别的类型。

Answer 1

正如 Fullcalendar v5 的 documentation 中所述，events 选项支持可能 return 类 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
  }
}

在 https://stackblitz.com/edit/angular-11-new-nciowx?file=src%2Fapp%2Fapp.component.ts

观看现场演示

如何在 fullcalendar v5 事件 URL 上添加 JWT header

How to add JWT header on fullcalendar v5 events URL

fullcalendar

typescript

angular