如何在前端Axios GET请求URL中添加当前用户ID？

核心思路 #

先从前端存储（比如localStorage）获取当前用户的ID，再将其拼接进请求URL即可。结合你的代码，具体操作如下：

1. 提前存储用户ID #

登录成功后，把后端返回的用户ID存入localStorage（如果还没做的话）：

// 示例：登录接口成功后保存用户ID
axiosInstance.post('/login', yourLoginData)
  .then(res => {
    localStorage.setItem('access_token', res.data.access_token);
    localStorage.setItem('user_id', res.data.uid); // 把用户ID存起来
  });

2. 修改Axios请求代码 #

在你的useEffect中，取出存储的用户ID，拼接成正确的请求路径：

useEffect(() => {
  const token = localStorage.getItem("access_token");
  const userId = localStorage.getItem("user_id");
  // 同时校验token和用户ID是否存在
  if (token && userId) {
    axiosInstance.get(`users/${userId}`).then((response) => {
      // 注意：接口返回的数据在response.data里，不是直接response
      setname(response.data.username);
      setemail(response.data.email);
      setidx(response.data.uid);
      console.log(response.data);
      setTimeout(() => {
        props.resetProfileFlag();
      }, 3000);
    }); 
  }
}, [props.success])

额外提示 #

• 你之前的代码里直接用obj.username是错误的，Axios的响应数据都包裹在response.data属性中，必须通过这个属性获取后端返回的用户信息
• 如果不想单独存储用户ID，也可以解析JWT token来获取（需要安装jwt-decode库）：

  import jwtDecode from 'jwt-decode';
  
  const token = localStorage.getItem("access_token");
  const decodedToken = jwtDecode(token);
  const userId = decodedToken.uid; // 字段名根据你后端JWT payload的实际字段调整
  

• 要处理用户ID不存在的情况，比如跳转到登录页面，避免无效请求

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