身份验证后的 Firebase 路由答案

【问题标题】：Firebase routing after authentication身份验证后的 Firebase 路由
【发布时间】：2017-12-13 13:21:51
【问题描述】：

我有以下问题：当我使用firebase身份验证返回的promise导航到我的注册页面时，我获得了同时显示的两个页面，而不是只有我的注册页面：

带有我的社交按钮的登录页面
我的注册页面（未应用任何 css），其中包含应用程序所需的配置文件详细信息

我的模块版本：

Angular CLI: 1.6.0
Node: 8.6.0
OS: linux x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cdk: 5.0.1
@angular/cli: 1.6.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.1
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack-bundle-analyzer: 2.9.1
webpack: 3.10.0

还有 login.component.ts 中的代码：

export class LoginComponent implements OnInit {

  ...

  constructor(private authService: AuthService,  private router: Router) {}

  ...

  loginWith(mode: string) {
    return this.authService.loginWith(mode).then((data) => {
      if(data.additionalUserInfo.isNewUser) {
         this.router.navigate(['register', {mode: mode}]).catch(error => {
           console.log("Navigate ERROR", error);
         });
      }
      else {
        this.router.navigate(['']);
      }
    });
 }

还有auth.service.ts的代码

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { login, logout } from './auth.reducer';

@Injectable()
export class AuthService {

  constructor(private afAuth: AngularFireAuth, private store: Store<any>) {}
  public redirectUrl: string;


  /**
   * Logs in the user
   * @returns {firebase.Promise<FirebaseAuthState>}
   */
  loginWithEmailAndPassword(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password).then((data) => {
      this.store.dispatch(login(data));
      return data;
    });
  }

  loginWith(mode : string) {
    return this.afAuth.auth.signInWithPopup(new this.afAuth.auth[mode + 'AuthProvider']()).then((data) => {
      this.store.dispatch(login(data));
      return data;
    });
  }

我的尝试：

抑制我所有的动画

结果是一样的：m 之间的混合

直接路由

loginWith(mode: string) {
  this.router.navigate(['register', {mode: mode}]);
}

结果OK，我已经拿到我的注册页面了

Ngrx 的使用

未最终确定，仅用于检查组件的行为。

import { Store } from '@ngrx/store';

import { AuthService } from '../auth.service';
import { selectorAuth } from '../auth.reducer';
...
export class LoginComponent implements OnInit {
...
  constructor(private authService: AuthService,  private router: Router, private store: Store<any>) {}

  ngOnInit() {}

  loginWith(mode: string) {
    this.store
      .select(selectorAuth)
      .subscribe(auth => {
        if(auth.isAuthenticated) {
          if(auth.payload.additionalUserInfo.isNewUser) {
            this.router.navigate(['register', {mode: mode}]).catch(error => {
               console.log("Navigate ERROR", error);
            });
          }
        }
      });

    return this.authService.loginWith(mode);
  }
...
}

结果是 KO：总是在两个页面之间混合

我想我错过了一些东西，但我不知道在哪里和什么，所以如果有人可以帮助，提前谢谢你。

【问题讨论】：

标签： angular firebase firebase-authentication angular-material angular-router

【解决方案1】：

正如这篇文章所回答的： ngrx store does not update UI after dispatched action from firebase promise

重定向的调用不在角度范围内，因此有必要使用 NgZone 来使重定向起作用。

所以我的代码现在是：

  loginWith(mode: string) {
    return this.authService.loginWith(mode).then((data) => {
      if(data.additionalUserInfo.isNewUser) {
        this.zone.run(() => {
          this.router.navigate(['register', {mode: mode}]);
          });
        });
      }
      else {
        this.router.navigate(['']);
      }
    });
  }

【讨论】：