如何在ASP.NET React项目模板的认证菜单中替换邮箱为全名

1. 后端暴露用户全名数据 #

首先确保后端能返回用户的名字和姓氏：

• 打开项目中负责用户信息的API控制器（比如AccountController.cs），修改返回用户信息的方法，将ApplicationUser中的FirstName、LastName字段加入响应模型
• 或者直接在响应中返回拼接好的FullName（$"{user.FirstName} {user.LastName}"）

2. 前端同步用户状态 #

前端需要把全名存入全局状态（模板默认用Redux）：

• 找到features/auth/authSlice.js，更新initialState里的user对象，添加fullName（或firstName、lastName）字段
• 在登录成功的异步逻辑中，调用后端的用户信息接口获取全名；如果后端把全名放到JWT Claims里，直接从解析后的token中提取该字段，再更新Redux的user状态

3. 修改导航菜单显示 #

找到导航组件（通常是NavMenu.js）：

• 定位到显示用户邮箱的代码（比如{user.email}），替换为{user.fullName}或者{${user.firstName} ${user.lastName}}
• 增加空值容错：{user?.fullName || user?.email}，防止用户信息未加载时出现报错

4. 优化方案：把全名加入JWT Claims #

如果不想额外调用API获取用户信息，可在后端生成JWT时添加全名Claim：

• 在Program.cs的JWT配置代码中，添加自定义Claim：

  options.ClaimsIdentity = new ClaimsIdentity(new List<Claim>
  {
      new Claim(ClaimTypes.GivenName, user.FirstName),
      new Claim(ClaimTypes.Surname, user.LastName),
      // 或者直接添加全名
      new Claim("FullName", $"{user.FirstName} {user.LastName}"),
      // 保留原有Claims
  });
  

• 前端解析token时，从Claims中提取对应字段，更新用户状态即可

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