Angular 6 - Firebase - 成功登录后路由未正常发生

Question

我花了很多时间来解决我的问题，但没能成功。另外，我遇到过来自 SO 的相关线程，但我仍然没有找到解决这个问题的方法。

问题

成功注册后，我收到电子邮件验证标志 true。但是当我尝试使用相同的凭据重新登录时，不会路由到 'home' 页面。我不知道如何制作 post 方法。

到此为止！

firebase-service.ts

export class FireBaseAuthenticationService {
  userData: any;
  constructor(
    public afs: AngularFirestore,
    public afAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone
  ) {
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('customerInfo', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('customerInfo'));
      } else {
        localStorage.setItem('customerInfo', null);
        JSON.parse(localStorage.getItem('customerInfo'));
      }
    });
  }
  userLogin(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.ngZone.run(() => {
          this.router.navigate(['home']);
        });
        this.setCustomerInfo(result.user);
      }).catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('err', errorMessage);
      })
  }
}

用户-login.html

<fieldset class="clearfix">
            <p><span class="fa fa-user"></span><input type="text" Placeholder="Username" required #userName ></p>
            <p><span class="fa fa-lock"></span><input type="password" Placeholder="Password" required #userPassword></p>
            <div id="submit-btn">

              <span class="spn-submit"><input type="submit" value="Sign In"  (click)="authenticate.userLogin(userName.value, userPassword.value)"></span>
            </div>
          </fieldset>

预计：

登录成功后，我想转到'home'页面。

但现在，登录页面加载了几秒钟并保持不变。

请告诉我需要更多信息。

请不要将其标记为重复，我已经挖掘了 SO 以找到解决方案。但我失败了。

感谢大家

Answer 1

您正在通过服务进行重定向，因此请在组件中使用 do 运算符或 return observable 和重定向。

使用 do 运算符

userLogin(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .do((result) => {
        this.ngZone.run(() => {
          this.router.navigate(['home']);
        });
        this.setCustomerInfo(result.user);
      }).catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('err', errorMessage);
      })
  }

我在 .do() 中进行了导航，因为成功登录将始终导航到当前设置的重定向 URL。

如果它不总是这样做，那么 router.navigate 就是错误的。但是，鉴于它总是这样做，那么这种方法可确保一致性。

在组件中创建方法并从组件重定向。

// service code
 userLogin(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password);
  }
}


// component code
userLogin(email, password) {
  this.authService.userLogin(email, password).then((result) => {
    this.ngZone.run(() => {
      this.router.navigate(['home']);
    });
    this.setCustomerInfo(result.user);
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.log('err', errorMessage);
  })
}

Angular 6 - Firebase - 成功登录后路由未正常发生

Angular 6 - Firebase - Routing not happening properly after successful login

angular

typescript

firebase-authentication

angular6

angular2-routing