Ionic 3+Firestore实现登录时检查用户邮箱验证状态的方法

嘿，这个需求其实很好实现，Firebase Auth本身就提供了现成的属性来检查用户邮箱验证状态，结合Ionic 3的登录流程就能搞定，我给你一步步说清楚：

用户登录成功后，Firebase Auth会返回当前登录用户的实例，这个实例里自带emailVerified布尔属性，直接判断它就能知道邮箱是否完成验证。

1. 在登录逻辑中添加验证检查 #

假设你已经有邮箱密码登录的逻辑，在登录成功后立刻获取用户实例并检查状态：

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import * as firebase from 'firebase'; // 引入Firebase

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  email: string = '';
  password: string = '';

  constructor(
    private navCtrl: NavController,
    private toastCtrl: ToastController
  ) {}

  async handleLogin() {
    try {
      // 执行邮箱密码登录
      await firebase.auth().signInWithEmailAndPassword(this.email, this.password);
      
      // 获取当前登录用户实例
      const currentUser = firebase.auth().currentUser;

      if (currentUser) {
        // 刷新用户信息（避免本地缓存旧状态，比如用户在其他设备已验证）
        await currentUser.reload();
        
        // 检查邮箱验证状态
        if (!currentUser.emailVerified) {
          // 未验证：提示用户并可重新发送验证邮件
          const toast = this.toastCtrl.create({
            message: '你的邮箱还未验证，请前往邮箱完成验证',
            duration: 4000,
            position: 'top'
          });
          toast.present();

          // 可选：自动重新发送验证邮件
          await currentUser.sendEmailVerification();
          const resendToast = this.toastCtrl.create({
            message: '验证邮件已重新发送至你的邮箱',
            duration: 3000,
            position: 'top'
          });
          resendToast.present();

          // 可选：强制退出登录，要求验证后再登录
          await firebase.auth().signOut();
        } else {
          // 已验证：跳转到主页
          this.navCtrl.setRoot('HomePage');
        }
      }
    } catch (error) {
      // 处理登录错误（比如密码错误、用户不存在等）
      const errorToast = this.toastCtrl.create({
        message: error.message,
        duration: 3000,
        position: 'top'
      });
      errorToast.present();
    }
  }
}

2. 封装到Auth服务（可选，让代码更整洁） #

如果你的项目有封装Auth服务，可以把检查逻辑抽离进去：

import { Injectable } from '@angular/core';
import * as firebase from 'firebase';

@Injectable()
export class AuthService {
  // 登录方法
  async loginWithEmail(email: string, password: string) {
    return firebase.auth().signInWithEmailAndPassword(email, password);
  }

  // 检查邮箱验证状态
  async checkEmailVerification(): Promise<boolean> {
    const user = firebase.auth().currentUser;
    if (!user) {
      throw new Error('用户未登录');
    }
    // 刷新服务器端最新状态
    await user.reload();
    return user.emailVerified;
  }

  // 重新发送验证邮件
  async resendVerificationEmail() {
    const user = firebase.auth().currentUser;
    if (user) {
      await user.sendEmailVerification();
    }
  }
}

然后在登录页面调用服务：

async handleLogin() {
  try {
    await this.authService.loginWithEmail(this.email, this.password);
    const isVerified = await this.authService.checkEmailVerification();
    
    if (!isVerified) {
      // 提示用户+重新发送邮件+退出登录的逻辑
      await this.authService.resendVerificationEmail();
      await firebase.auth().signOut();
    } else {
      this.navCtrl.setRoot('HomePage');
    }
  } catch (error) {
    // 错误处理
  }
}

3. 全局状态监听（处理自动登录场景） #

如果用户开启了自动登录（比如记住密码），可以在app.component.ts里监听用户状态变化，确保每次启动APP都检查验证状态：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import * as firebase from 'firebase';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = 'LoginPage';

  constructor(private platform: Platform) {
    platform.ready().then(() => {
      firebase.auth().onAuthStateChanged(async (user) => {
        if (user) {
          await user.reload();
          // 根据验证状态跳转页面
          this.rootPage = user.emailVerified ? 'HomePage' : 'LoginPage';
          if (!user.emailVerified) {
            // 这里可以给用户弹出提示
          }
        } else {
          this.rootPage = 'LoginPage';
        }
      });
    });
  }
}

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