如何将登录API返回的用户信息动态作为参数传递给其他API获取数据

核心思路是通过「全局持久化存储用户信息+全局请求拦截自动注参+状态变更自动触发请求」的逻辑实现完全动态化，不需要手动传固定参数：

• 首先处理登录成功回调：调用登录接口拿到用户详情响应后，把后续接口需要用到的字段（比如用户ID、身份token、业务标识字段等）同时做两层存储：
  1. 持久化存储到localStorage/sessionStorage（前端场景）或者服务端session/cookie（后端渲染场景），避免页面刷新后数据丢失
  2. 同步到全局状态管理容器（比如Vue的Pinia/Vuex、React的Redux/Context、Angular的全局Service），方便所有组件和全局逻辑直接读取
• 封装全局API请求拦截器：所有业务接口发起请求前，统一从全局存储读取所需的用户参数，自动注入到请求头、请求query或者请求body中，不需要每个接口单独传参。以常用的Axios请求库为例，拦截器代码示例：

  axios.interceptors.request.use(config => {
    // 统一读取全局存储的用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    // 自动注入身份token到请求头
    if (userInfo.token) {
      config.headers.Authorization = `Bearer ${userInfo.token}`
    }
    // 自动注入业务所需的用户字段，比如用户ID
    if (userInfo.userId) {
      if (config.method === 'get') {
        config.params = {...config.params, userId: userInfo.userId}
      } else {
        config.data = {...config.data, userId: userInfo.userId}
      }
    }
    return config
  })
  

• 监听登录状态触发接口请求：在需要拉取关联数据的组件中，监听全局用户信息的变化，一旦检测到用户完成登录（用户信息从空值变为有效值），自动触发对应业务接口的请求拉取数据。以Vue3组合式API为例：

  import { watch } from 'vue'
  import { useUserStore } from '@/stores/user'
  const userStore = useUserStore()
  
  // 监听用户信息变化，登录成功后自动拉取数据
  watch(() => userStore.userInfo, (newUserInfo) => {
    if (newUserInfo?.userId) {
      // 调用业务接口，不需要手动传用户参数，拦截器会自动注入
      fetchRelatedData()
    }
  }, { immediate: true })
  

• 增加兜底逻辑：请求拦截器中如果检测到没有有效用户信息，可以直接中断请求，跳转到登录页面，避免发送无效请求。

以上逻辑不限制具体技术栈，前端单页应用、多页应用、服务端渲染场景都可以按照这个思路适配调整。

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