Firebase UID刷新/页面跳转后变为undefined问题咨询

看起来你遇到的问题是页面刷新/跳转后全局的user变量丢失了UID，但其他用户数据还能正常使用，这大概率是因为你只在登录成功的回调里给user赋值了一次，而没有监听Firebase Auth的状态变化——毕竟页面刷新后，之前存在内存里的全局变量会被清空，但Firebase其实会在后台自动恢复用户的登录状态，只是你没捕获到这个状态。

问题根源 #

你当前的代码只在signInWithPopup的then回调里给user赋值：

signinBut.addEventListener("click", e => { 
  firebase.auth().signInWithPopup(provider).then(function(result) { 
    var token = result.credential.accessToken; 
    user = result.user; // 仅登录时赋值一次
  }).catch(function(error) { 
    var errorCode = error.code; 
    var errorMessage = error.message; 
    var email = error.email; 
    // 剩余错误处理代码
  })
})

这里的user是全局变量，页面刷新后内存清空，这个变量就变成undefined了。而你说的姓名、邮箱还能正常使用，可能是你之前把这些数据存在了localStorage/sessionStorage里，或者在其他地方有缓存，但UID是直接从user对象里取的，所以就失效了。

正确的解决方案：监听Auth状态变化 #

Firebase Auth提供了onAuthStateChanged方法，它会在页面加载时自动检查用户的登录状态，不管是刚登录还是页面刷新后，只要用户处于登录状态，就会触发回调，你可以在这个回调里更新你的user变量或者用户状态：

// 放在页面初始化的位置（比如DOM加载完成后）
firebase.auth().onAuthStateChanged(function(currentUser) {
  if (currentUser) {
    // 用户已登录，更新全局user变量
    user = currentUser;
    // 这里可以做其他事情，比如渲染用户信息、初始化依赖用户的功能
    console.log("当前用户UID:", user.uid);
  } else {
    // 用户未登录，跳转到登录页或者处理未登录状态
    console.log("用户未登录");
  }
});

额外建议 #

• 尽量不要依赖全局变量存储用户信息，你可以把用户状态存在一个状态管理工具里（比如React的useState/Redux，Vue的Vuex），或者封装成一个全局的用户管理对象，避免全局变量污染。
• 如果需要持久化用户信息，除了Firebase自动的持久化，你也可以把用户的基本信息（比如UID、姓名、邮箱）存在localStorage里，但要注意敏感信息不要存在本地。
• 每次需要使用用户UID时，优先从firebase.auth().currentUser里获取，而不是依赖全局的user变量，因为currentUser是Firebase维护的实时用户状态：

  // 直接获取当前用户UID
  const currentUid = firebase.auth().currentUser?.uid;
  

这样修改后，不管页面怎么刷新或者跳转，只要用户处于登录状态，你都能正确获取到UID和其他用户数据了。

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