Question

我遇到以下问题：当我使用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}]);
}

结果还可以，我已经获得了我的注册页面

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：总是两页之间的混合

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

Answer 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(['']);
      }
    });
  }

身份验证后的Firebase路由

1 个答案: