已验证 AngularFire 警卫的电子邮件

Question

在我的应用上注册用户时遇到问题。实际上，用户可以从 Me 选项卡按钮访问他的个人资料（如果他已经登录，否则他会被重定向到登录页面）。 enter image description here

问题是，注册后，用户无需验证电子邮件即可访问个人资料页面。我不知道如何使用 emailVerified 管道 https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md 。谁能告诉我如何实现这个操作？

Tabs.routing.module：

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['tabs/login']);
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'search',
        loadChildren: () => import('../search/search.module').then(m => m.SearchPageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../profile/profile.module').then(m => m.ProfilePageModule),...canActivate(redirectUnauthorizedToLogin),
      },
      {
        path: 'login',
        loadChildren: () => import('../login/login.module').then(m => m.LoginPageModule)
      },
      {
        path: 'registration',
        loadChildren: () => import('../registration/registration.module').then(m => m.RegistrationPageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

身份验证服务：

import { Injectable, NgZone } from '@angular/core';
import { auth } from 'firebase/app';
import { User } from "./user";
import { Router } from "@angular/router";
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})

export class AuthenticationService {
  userData: any;

  constructor(
    public afStore: AngularFirestore,
    public ngFireAuth: AngularFireAuth,
    public router: Router,  
    public ngZone: NgZone 
  ) {
    this.ngFireAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

  // Login in with email/password
  SignIn(email, password) {
    return this.ngFireAuth.signInWithEmailAndPassword(email, password)
  }

  // Register user with email/password
  RegisterUser(email, password) {
    return this.ngFireAuth.createUserWithEmailAndPassword(email, password)
  }

  // Email verification when new user register
  SendVerificationMail() {
    return this.ngFireAuth.currentUser.then(u => u.sendEmailVerification())
    .then(() => {
      this.router.navigate(['tabs/verify-email']);
    })
  }

  // Recover password
  PasswordRecover(passwordResetEmail) {
    return this.ngFireAuth.sendPasswordResetEmail(passwordResetEmail)
    .then(() => {
      window.alert('Password reset email has been sent, please check your inbox.');
    }).catch((error) => {
      window.alert(error)
    })
  }

  // Returns true when user is looged in
  get isLoggedIn(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
  }

  // Returns true when user's email is verified
  get isEmailVerified(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user.emailVerified !== false) ? true : false;
  }

  // Sign in with Gmail
  GoogleAuth() {
    return this.AuthLogin(new auth.GoogleAuthProvider());
  }

  // Auth providers
  AuthLogin(provider) {
    return this.ngFireAuth.signInWithPopup(provider)
    .then((result) => {
       this.ngZone.run(() => {
          this.router.navigate(['tabs/home']);
        })
      this.SetUserData(result.user);
    }).catch((error) => {
      window.alert(error)
    })
  }

  // Store user in localStorage
  SetUserData(user) {
    const userRef: AngularFirestoreDocument<any> = this.afStore.doc(`users/${user.uid}`);
    const userData: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      emailVerified: user.emailVerified
    }
    return userRef.set(userData, {
      merge: true
    })
  }

  // Sign-out 
  SignOut() {
    return this.ngFireAuth.signOut().then(() => {
      localStorage.removeItem('user');
      this.router.navigate(['tabs/login']);
    })
  }

}

Answer 1

我刚刚遇到了同样的问题，并设法像这样解决了它。在您的 Tabs.routing.module 文档中，您从 AngularFire 导入 redirectUnauthorizedTo，它默认检查用户是否已登录，而不是用户是否已登录并验证。

相反，您可以像这样编写自己的名为 redirectUnverifiedTo 的 redirectUnauthorizedTo 函数。

首先，确保导入 emailVerified 而不是 redirectUnauthorizedTo。

import { AngularFireAuthGuard, emailVerified } from '@angular/fire/auth-guard';

然后定义redirectUnverifiedTo。

const redirectUnverifiedTo = (redirect: any[]) => pipe(emailVerified, map(emailVerified => emailVerified || redirect));
const redirectUnauthorizedToLogin = () => redirectUnverifiedTo(['tabs/login']);

终于可以正常使用redirectUnauthorizedToLogin了！

Answer 2

如果您需要在用户未经授权或电子邮件未经验证的情况下重定向到不同的路径，您可以使用内部映射。

/** Redirect users to login screen or email confirmation screen */
const redirectToEmailConfirm: AuthPipeGenerator = (
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) =>
  switchMap((user) => {
    return of(user).pipe(
      redirectUnauthorizedTo(`/login?redirectTo=${state.url}`),
      map((result) => {
        if (result === true) {
          // User is authorized
          if (user.emailVerified) {
            return true;
          } else {
            return ['/verify-email'];
          }
        } else {
          return result;
        }
      })
    );
  });