React中Token认证后如何获取用户ID实现删除/更新账户功能

方案1：登录时存储用户ID到localStorage（最适合新手，稳定性最高） #

你已经把token存在localStorage里，直接在登录请求成功的逻辑中同步存储用户ID即可：

• 登录接口请求成功后，从返回的响应数据中取出用户ID字段，添加如下代码：

// 替换为你实际接口返回的用户ID字段
localStorage.setItem('user_id', res.data.id)

之后所有需要用到用户ID的场景，直接从localStorage取值即可，无需依赖组件状态或者路由参数，示例如下：

修正后的删除用户函数 #

const DeleteUser = async () => {
  const userId = localStorage.getItem('user_id')
  // 增加空值判断避免请求报错
  if (!userId) return
  await fetch(`${process.env.REACT_APP_API_URL}users/${userId}/`, {
    method: "delete",
    headers: {
      Authorization: `Token ${localStorage.getItem("token")}`,
    },
  });
  // 删除成功后清空本地存储
  localStorage.clear()
  navigate("/");
};

方案2：修复userData.id调用失败的问题 #

你之前调用${userData.id}失败，大概率是两个原因导致：

• 你的useEffect没有加依赖数组，会无限触发接口请求，且首次渲染时userData还未完成接口数据赋值，初始值里没有id字段，读取为undefined
• 接口返回的用户数据没有正确赋值到userData的id字段

修正后的useEffect代码如下：

useEffect(() => {
  // 优先取本地存储的用户ID，兜底用路由参数id
  const targetId = localStorage.getItem('user_id') || id
  if (!targetId) return
  fetch(`${process.env.REACT_APP_API_URL}users/${targetId}/`)
    .then((results) => {
      if (!results.ok) throw new Error('用户信息请求失败')
      return results.json();
    })
    .then((data) => {
      setUserData(data);
      // 拿到数据后兜底存储一次用户ID
      if (data.id) localStorage.setItem('user_id', data.id)
    });
// 仅当路由参数id变化时重新触发请求
}, [id]);

修正后要使用userData.id时，确保是在useEffect请求完成之后调用，比如编辑账户跳转的逻辑可以写成：

const EditAccount = () => {
  const userId = localStorage.getItem('user_id') || userData.id
  navigate(`/edit-account/${userId}`);
};

进阶方案（可选） #

如果后续项目复杂度提升，不想把用户信息存在本地存储，可以用React Context或者Redux等全局状态管理工具存储用户ID，新手阶段用localStorage完全够用。

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