使用Google OAuth、Facebook登录后如何在应用前端展示当前登录用户

前置逻辑说明 #

你已经完成了OAuth登录流程和用户数据落库MongoDB的逻辑，缺失的核心环节是登录状态的全局识别和前端渲染判断，按以下步骤实现即可：

1. 后端补充身份校验与当前用户查询接口 #

• 登录成功时给客户端下发可识别身份的凭证：可以是存在Cookie里的sessionId，也可以是返回给前端存在localStorage里的JWT Token，凭证里要对应用户在MongoDB里的_id字段
• 新增接口GET /api/get-current-user，接口逻辑为：
  1. 读取请求携带的身份凭证，解析出用户ID
  2. 凭证无效/过期直接返回401 未登录状态码
  3. 凭证有效则根据用户ID从MongoDB中查询对应用户的公开信息（昵称、头像、邮箱等），以JSON格式返回

2. 前端改造渲染逻辑 #

页面加载、登录回调完成两个时间点，都要调用上面的接口判断登录状态，替换对应区域的渲染内容：

• 给原来放登录按钮的容器加个唯一ID，比如id="auth-container"
• 参考示例代码（原生JS实现，框架逻辑同理）：

// 封装获取当前用户信息的方法
async function checkLoginStatus() {
  const authContainer = document.querySelector('#auth-container')
  try {
    const res = await fetch('/api/get-current-user', {
      // 如果用Cookie存凭证需要加这个配置，允许请求携带Cookie
      credentials: 'include'
    })
    if (res.status === 200) {
      // 已登录，渲染用户信息
      const userInfo = await res.json()
      authContainer.innerHTML = `
        <div class="user-info">
          <img src="${userInfo.avatar || '默认头像地址'}" alt="用户头像" style="width:32px;border-radius:50%;vertical-align:middle;">
          <span style="margin:0 8px;">${userInfo.nickname || userInfo.email}</span>
          <button id="logout-btn">退出登录</button>
        </div>
      `
      // 绑定退出登录事件
      document.querySelector('#logout-btn').addEventListener('click', handleLogout)
    } else {
      // 未登录，渲染登录按钮
      authContainer.innerHTML = `
        <button class="login-btn" id="google-login">Google账号登录</button>
        <button class="login-btn" id="facebook-login">Facebook账号登录</button>
      `
      // 绑定原有登录按钮的点击事件
      bindLoginEvents()
    }
  } catch (err) {
    console.error('登录状态校验失败', err)
    // 异常情况默认展示登录按钮
    authContainer.innerHTML = `
      <button class="login-btn" id="google-login">Google账号登录</button>
      <button class="login-btn" id="facebook-login">Facebook账号登录</button>
    `
    bindLoginEvents()
  }
}

// 页面加载时执行一次校验
window.addEventListener('load', checkLoginStatus)
// OAuth登录回调成功后再执行一次校验，无需刷新页面就能更新状态
window.addEventListener('oauth-login-success', checkLoginStatus)

3. 补充配套逻辑 #

• 退出登录接口：后端清空会话/标记Token失效，前端清空本地存储的身份凭证，执行完后调用checkLoginStatus()重新渲染登录按钮
• OAuth回调页逻辑：登录成功后不要直接关闭/跳转，先触发自定义的oauth-login-success事件通知主页面更新状态

你提供的Facebook登录回调URL参考：

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