如何通过Django Framework的TokenAuthentication在前端获取用户对象

• 第一步：解析Token提取用户ID
  先从已获取的Token里提取用户ID（你提到Token包含该字段）。如果是JWT格式的Token，可直接在前端解析：

  // 假设Token存储在变量token中
  function parseJwt(token) {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(c => {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(jsonPayload);
  }
  
  const tokenData = parseJwt(token);
  const userId = tokenData.id; // 注意字段名需和Token内实际字段匹配，可能是user_id等
  

• 第二步：调用后端接口获取完整信息
  前端无法直接从Token获取其余用户数据，必须调用后端提供的用户信息接口，携带Token做身份验证：

  // 用fetch发送请求示例
  fetch(`/api/users/${userId}`, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // 将Token放入请求头验证身份
    }
  })
  .then(res => res.json())
  .then(fullUserInfo => {
    // 此处拿到完整用户信息，如邮箱、手机号等
    console.log(fullUserInfo);
    // 可将数据渲染到页面或存入前端存储
  })
  .catch(err => {
    console.error('获取用户信息失败:', err);
  });
  

• 第三步：存储并复用用户信息
  拿到完整信息后，可存入localStorage或前端状态管理工具（如React的useState、Vue的data），方便后续页面使用：

  // 存入localStorage，刷新页面不丢失
  localStorage.setItem('fullUserInfo', JSON.stringify(fullUserInfo));
  
  // 后续使用时取出
  const savedUserInfo = JSON.parse(localStorage.getItem('fullUserInfo'));
  

注意：必须通过后端接口获取用户信息，禁止前端自行构造数据，避免数据错误和安全风险。请求时务必携带Token，确保后端验证身份后返回正确数据。

内容的提问来源于stack exchange，提问作者Luis F. Rojas