ReactJS中使用Bearer认证令牌获取登录用户信息

1. 编写获取用户信息的请求函数 #

核心是在请求头中携带存在localStorage的认证令牌，格式为Bearer {token}，以下提供两种常用实现方式：

用浏览器原生fetch实现：

const fetchUserInfo = async () => {
  const token = localStorage.getItem('auth_token'); // 替换成你的令牌实际存储键名
  if (!token) {
    // 无令牌时的处理逻辑，比如跳转登录页
    return null;
  }
  
  try {
    const response = await fetch('/api/me', { // 替换成你的实际API地址
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json',
      },
    });
    
    if (!response.ok) {
      throw new Error('获取用户信息失败');
    }
    
    return await response.json();
  } catch (error) {
    console.error(error);
    // 错误处理：比如令牌过期时清除令牌并跳转登录
    localStorage.removeItem('auth_token');
    return null;
  }
};

用axios实现：

import axios from 'axios';

const fetchUserInfo = async () => {
  const token = localStorage.getItem('auth_token');
  if (!token) return null;
  
  try {
    const response = await axios.get('/api/me', {
      headers: {
        'Authorization': `Bearer ${token}`,
      },
    });
    return response.data;
  } catch (error) {
    console.error(error);
    localStorage.removeItem('auth_token');
    return null;
  }
};

2. 在React组件中调用并展示用户信息 #

使用React的状态管理钩子存储用户数据，在组件挂载时发起请求：

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getUser = async () => {
      const userData = await fetchUserInfo();
      setUser(userData);
      setLoading(false);
    };
    
    getUser();
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (!user) {
    return <div>请先登录</div>;
  }

  return (
    <div className="user-profile">
      <h2>用户信息</h2>
      <p><strong>用户名:</strong> {user.name}</p>
      <p><strong>手机号:</strong> {user.phone}</p>
      {/* 根据你的API返回字段调整展示内容 */}
    </div>
  );
}

export default UserProfile;

后端API参考（你的Laravel代码） #

public function me(Request $request){    
    return $request->user();
}

注意事项 #

• 确保localStorage中存储的令牌键名和代码中的一致（比如你的项目可能存的是token而非auth_token）
• 务必处理令牌过期或无效的情况，避免前端展示异常
• 如果API地址不是相对路径，需填写完整URL（例如https://your-domain.com/api/me）

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