Spring Boot+React集成问题：登录用户信息无法前端展示

一、前端请求校验 #

• 确认请求头携带认证信息：Postman能正常调用但前端不行，大概率是前端请求用户信息接口时没带上登录后的认证凭证（token/cookie）。先检查登录成功后是否把后端返回的token存入localStorage或sessionStorage，请求时在头信息里携带：

  // 登录成功后存储token
  localStorage.setItem('authToken', response.data.token);
  
  // 请求用户信息时携带token
  const token = localStorage.getItem('authToken');
  axios.get('/api/user/current', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  })
  .then(res => {
    setUser(res.data); // 将用户信息存入组件状态
  })
  .catch(err => console.error(err));
  

• 跨域配置需允许携带凭证：如果后端跨域配置没开启allowCredentials，前端携带的token会被拦截。检查Spring Boot的跨域配置：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://localhost:3000") // 替换成你的前端地址
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*")
                  .allowCredentials(true); // 必须开启，允许携带认证信息
      }
  }
  

二、前端状态管理排查 #

• 确保用户信息正确存入全局状态：如果用React Context或Redux管理登录状态，要在登录成功后立即请求用户信息并更新状态，避免跳转后组件读取不到数据。示例（React Context）：

  // AuthContext.js
  const AuthContext = createContext();
  
  export const AuthProvider = ({ children }) => {
      const [user, setUser] = useState(null);
  
      const login = async (credentials) => {
          const loginRes = await axios.post('/api/auth/login', credentials);
          localStorage.setItem('authToken', loginRes.data.token);
          // 登录成功后立刻拉取用户信息并更新状态
          const userRes = await axios.get('/api/user/current', {
              headers: { 'Authorization': `Bearer ${loginRes.data.token}` }
          });
          setUser(userRes.data);
      };
  
      return (
          <AuthContext.Provider value={{ user, login }}>
              {children}
          </AuthContext.Provider>
      );
  };
  
  // 个人主页组件中读取用户信息
  const { user } = useContext(AuthContext);
  
  return (
      <div>
          {user ? (
              <div>
                  <h2>欢迎，{user.username}</h2>
                  <p>角色：{user.role}</p>
              </div>
          ) : (
              <p>加载中...</p>
          )}
      </div>
  );
  

三、后端与返回格式校验 #

• 字段名大小写/结构匹配：对比Postman返回的JSON字段，比如后端返回username，前端不能写成userName，字段不匹配会导致读取不到数据。
• 异常状态码处理：后端在用户未认证时要返回401状态码，前端捕获后可以跳回登录页，同时排查是否是token过期或解析失败导致的认证失败。

四、控制台报错针对性修复 #

• 401 Unauthorized：检查token是否正确、是否过期，后端的JWT解析逻辑是否和前端生成的token一致。
• 字段undefined：打印后端返回的完整响应体，确认前端读取的层级是否正确，比如后端返回{data: {user: {...}}}，前端要写成res.data.data.user而非res.data.user。

内容的提问来源于stack exchange，提问作者sunith p pathirana