如何通过Vuex与Firebase关联用户认证与个人数据？

我来帮你解决这个问题——核心是把Firebase Auth的用户和你存储的个人资料数据用**唯一用户ID（UID）**关联起来，这是Firebase里关联认证与用户数据的标准做法。下面是具体的实现步骤和代码修改建议：

1. 注册时同步存储个人数据到Firestore #

Firebase Auth只提供基础的认证字段（比如邮箱、displayName、UID），额外的个人数据（比如电话、地址等）需要存在Firestore或Realtime Database中。注册成功后，我们用认证用户的UID作为文档ID，把个人数据存入Firestore的users集合，这样就能保证认证用户和个人资料一一对应。

修改你的register.vue中的register方法：

register() {
  if (this.isFormValid()) {
    firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
      // 第一步：更新认证用户的基础信息（比如displayName）
      .then(userCredential => {
        return userCredential.user.updateProfile({
          displayName: this.displayName // 假设这是你表单里的用户名字段
        });
      })
      // 第二步：将完整个人数据存入Firestore
      .then(() => {
        const currentUser = firebase.auth().currentUser;
        // 用UID作为文档ID，确保关联关系
        return firebase.firestore().collection('users').doc(currentUser.uid).set({
          // 包含认证里的基础字段，也可以添加表单中的其他个人数据
          displayName: currentUser.displayName,
          email: currentUser.email,
          phoneNumber: this.phoneNumber, // 假设这是你表单里的电话字段
          address: this.address, // 假设这是你表单里的地址字段
          createdAt: firebase.firestore.FieldValue.serverTimestamp()
        });
      })
      .catch(error => {
        console.error('注册失败:', error);
        // 这里可以添加用户友好的错误提示，比如弹窗显示错误信息
      });
  }
}

2. 登录后获取完整用户信息 #

登录成功后，通过监听Auth状态变化，拿到当前用户的UID，再去Firestore查询对应的users文档，就能把认证信息和个人数据合并起来展示。

比如在你的首页/用户中心组件中添加以下逻辑：

// Vue2示例（mounted钩子）
mounted() {
  // 监听Auth状态变化，自动处理登录/登出
  this.authListener = firebase.auth().onAuthStateChanged(user => {
    if (user) {
      // 用户已登录，用UID查询个人数据
      firebase.firestore().collection('users').doc(user.uid)
        .get()
        .then(doc => {
          if (doc.exists) {
            // 合并认证信息和个人数据
            this.fullUserInfo = {
              ...user, // 包含Auth的uid、email、displayName等
              ...doc.data() // 包含你存储的phoneNumber、address等
            };
            console.log('完整用户信息:', this.fullUserInfo);
          } else {
            console.error('未找到该用户的个人资料');
            // 可以提示用户完善个人信息
          }
        })
        .catch(error => {
          console.error('获取个人资料失败:', error);
        });
    } else {
      // 用户登出，清空数据
      this.fullUserInfo = null;
    }
  });
},

// 组件销毁时取消监听，避免内存泄漏
beforeDestroy() {
  if (this.authListener) {
    this.authListener();
  }
}

3. 关键注意事项：Firestore安全规则 #

为了保证数据安全，一定要配置Firestore的安全规则，确保只有用户自己能读写自己的个人资料：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      // 仅允许登录用户读写自己的文档
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

这样处理后，用户登录后就能同时获取到Firebase Auth的认证信息和你存储的全部个人数据，完美解决关联问题啦！

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