Vue.js中Axios请求指定用户数据却返回全部用户，请求参数异常求助

我一眼就看到了问题的核心——代码执行顺序搞反了，导致请求时根本没带上正确的用户ID。咱们来一步步理清楚：

问题根源 #

在你的created钩子中，你先调用了getUserData()，之后才解析token给user_id赋值。这意味着第一次发起请求时，this.user_id还是初始的空字符串''，你的请求实际发去了http://localhost:3000/api/v1/users/（末尾没有ID）。如果你的后端同时有返回所有用户的index接口，路由就会匹配到那个接口，自然返回所有用户数据了。

修正后的前端代码 #

只需要调整created里的执行顺序，确保先拿到user_id再发请求：

data() { 
  return { 
    user_data: [], 
    user_id: '', 
  }; 
}, 
created() { 
  // 先解析token拿到用户ID
  const decode = jwtDecode(localStorage.auth_token); 
  this.user_id = decode.user_id; 
  // 再调用接口获取指定用户数据
  this.getUserData(); 
}, 
methods: { 
  getUserData() { 
    // 加个小校验，避免空ID请求
    if (!this.user_id) {
      console.error('用户ID为空，无法获取数据');
      return;
    }
    axios.get(`http://localhost:3000/api/v1/users/${this.user_id}`)
    .then((response) => { 
      this.user_data = response.data; 
    })
    .catch((error) => {
      // 加上错误捕获，方便排查问题
      console.error('获取用户数据失败:', error);
    }); 
  }, 
} 

额外优化建议 #

1. 后端加参数校验：把find换成find_by，避免无效ID直接抛出异常，返回更友好的错误信息：

def show 
  user = User.find_by(id: params[:id])
  if user
    render json: user 
  else
    render json: { error: '该用户不存在' }, status: :not_found
  end
end

2. 前端加token检查：解析前先确认token存在，避免jwtDecode报错：

created() { 
  const token = localStorage.auth_token;
  if (!token) {
    console.error('未找到登录令牌，请重新登录');
    // 这里可以加跳转到登录页的逻辑
    return;
  }
  const decode = jwtDecode(token); 
  this.user_id = decode.user_id; 
  this.getUserData(); 
}, 

这样调整后，请求就能正确带上用户ID，后端也会返回你想要的指定用户数据了。

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