用户已登录时如何调用API获取当前用户信息实现表单预填充

基础前提 #

你需要先确保用户登录成功后，后端返回的身份凭证（JWT Token、Session ID等）已经存储在本地（localStorage、sessionStorage、Cookie均可），后续请求用户信息接口时必须携带该凭证，后端才能识别当前请求对应的登录用户。

具体实现步骤 #

• 步骤1：校验登录状态
  页面初始化时先检查本地存储的身份凭证是否有效，若凭证不存在/已过期，直接跳转登录页，无需执行后续填充逻辑。
• 步骤2：请求当前登录用户信息
  携带身份凭证调用用户信息查询接口，参考JS fetch实现代码如下：

  // 示例：JWT Token存在localStorage中，存储key为access_token
  const userToken = localStorage.getItem('access_token');
  
  async function fetchUserInfo() {
    try {
      const response = await fetch('/api/user/current', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${userToken}`,
          'Content-Type': 'application/json'
        },
        // 若使用Cookie+Session鉴权，需额外添加以下配置
        // credentials: 'include'
      });
      if (!response.ok) throw new Error('用户信息获取失败');
      return await response.json();
    } catch (error) {
      console.error('请求异常：', error);
      return null;
    }
  }
  

• 步骤3：将用户数据填充到表单
  拿到接口返回的用户数据后，给对应表单字段赋值即可，原生JS实现参考：

  async function prefillForm() {
    const currentUser = await fetchUserInfo();
    if (!currentUser) return;
  
    // 按你的表单字段id对应赋值即可
    document.getElementById('username').value = currentUser.nickname || '';
    document.getElementById('email').value = currentUser.email || '';
    document.getElementById('phone').value = currentUser.mobile || '';
    // 下拉框、单选/复选框等特殊字段，直接修改对应选中状态即可
  }
  
  // DOM加载完成后执行填充逻辑
  document.addEventListener('DOMContentLoaded', prefillForm);
  

框架适配说明 #

如果你使用Vue、React等前端框架，不需要手动操作DOM，直接将接口返回的用户数据赋值给表单绑定的响应式变量即可完成预填充。

注意事项 #

• 所有涉及身份凭证的请求必须走HTTPS协议，避免凭证泄露造成账号安全问题
• 赋值前要对接口返回字段做非空兼容，避免字段缺失导致页面报错
• 用户信息接口必须做权限校验，仅允许用户查询自身的信息

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