如何在FullCalendar.io的JSON Feed中添加JWT Bearer Token访问.NET 6 API

当然可以实现这个需求，只需要分别调整客户端FullCalendar的请求配置，以及服务端的JWT认证配置即可，具体操作如下：

一、客户端React代码修改 #

FullCalendar的events属性不仅支持直接传入URL字符串，还支持传入异步函数自定义请求逻辑，我们可以利用这个特性在请求中添加JWT Token认证头：

<FullCalendar
  initialView="dayGridMonth"
  headerToolbar={{
    left: "prev,next",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay"
  }}
  plugins={[dayGridPlugin, timeGridPlugin]}
  events={async (info) => {
    // 从本地存储或应用状态中获取JWT Token（根据你的实际存储方式调整）
    const token = localStorage.getItem('jwtToken');
    // 构造请求URL，带上FullCalendar自动传递的start和end参数
    const url = `${process.env.REACT_APP_API_URL}/activities/getEventsByDate/${id}?start=${info.startStr}&end=${info.endStr}`;
    
    const response = await fetch(url, {
      headers: {
        // 添加JWT认证头
        'Authorization': `Bearer ${token}`
      }
    });
    
    // 返回解析后的事件数据
    return await response.json();
  }}
  eventClick={handleEventClick}
/>

说明： #

• info参数包含FullCalendar自动生成的startStr和endStr，对应原API接收的start和end查询参数，直接拼接进URL即可。
• Token的获取方式根据应用实际情况调整，比如从Redux状态、Context或者localStorage中读取。

二、.NET 6 Web API端配置 #

1. 修改控制器Action #

直接移除[AllowAnonymous]特性，若需要强制认证，可添加[Authorize]特性：

[Authorize]
[HttpGet("GetEventsByDate/{routeName}")]
public async Task<ActionResult> GetRoomEvents(string routeName)
{
    string start = Request.Query["start"];
    string end = Request.Query["end"];
    return HandleResult(await Mediator.Send(new GetEventsByDate.Query { RouteName = routeName, Start = start, End = end }));
}

2. 配置JWT Bearer认证 #

在Program.cs中添加JWT认证服务和中间件：

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using System.Text;

// 添加JWT认证服务
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            // 根据你的JWT配置调整以下参数
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = builder.Configuration["Jwt:Issuer"],
            ValidAudience = builder.Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
        };
    });

// 注意中间件顺序：UseRouting之后，UseAuthorization之前添加UseAuthentication
app.UseRouting();
app.UseAuthentication(); // 添加认证中间件
app.UseAuthorization();

说明： #

• Jwt:Issuer、Jwt:Audience、Jwt:Key这些配置项需要在appsettings.json中定义，需与生成JWT时的配置一致。

内容的提问来源于stack exchange，提问作者Bryan Dellinger