在Angular2中进行身份验证后重定向答案

【问题标题】：Redirect after Auth in Angular2在Angular2中进行身份验证后重定向
【发布时间】：2017-08-19 07:58:05
【问题描述】：

所以我有一个简单的问题。我有一个登录页面，其中包含一些用于登录的社交媒体图标。我想要实现的是，当他们单击按钮并对其进行授权时，他们会被重定向到一个新页面。但是，现在发生的情况是它们只保留在 /login 页面上。

这是我的 HTML，第一个 routerLink 是我解决问题的尝试，但即使用户没有完成登录过程，它也会将用户带回主页。

<div class="row omb_row-sm-offset-3 omb_socialButtons">
            <div class="col-xs-4 col-sm-2">
            <a  [routerLink]="['/']" (click)="loginFacebook()" class="btn btn-block btn-social btn-facebook">
              <i class="fa fa-facebook"></i> Facebook
            </a>
            </div>
            <div class="col-xs-4 col-sm-2">
            <a (click)="loginTwitter()" class="btn btn-block btn-social btn-twitter">
              <i class="fa fa-twitter"></i> Twitter
            </a>
            </div>
            <div class="col-xs-4 col-sm-2">
            <a (click)="loginGoogle()" class="btn btn-block btn-social btn-google">
              <i class="fa fa-google"></i> Google
            </a>
            </div>
        </div>

这是他们的 JS/TS 代码 sn-p

  loginGoogle(){
    this.af.auth.login({
      provider:AuthProviders.Google,
      method: AuthMethods.Popup
    });
  }
  loginFacebook(){
    this.af.auth.login({
      provider: AuthProviders.Facebook,
      method: AuthMethods.Popup
    });
  }
  loginTwitter(){
    this.af.auth.login({
      provider: AuthProviders.Twitter,
      method: AuthMethods.Popup
    });
  }

非常感谢任何帮助。

【问题讨论】：

标签： angular firebase login firebase-authentication

【解决方案1】：

基于 AngularFire2 文档，this.af.auth.login() 返回一个 Promise（技术上是 firebase.Promise<FirebaseAuthState>）。您需要在您的 login() 调用中添加一个 .then() 子句，以处理 Promise 的成功解析并相应地重定向。

这是一个粗略的示例，说明如何将用户重定向回登录，假设您在控制器的 this.router 上使用 Angular Router 类：

loginGoogle() {
  this.af.auth.login({
    provider:AuthProviders.Google,
    method: AuthMethods.Popup
  }).then((success) => {
    // Redirect the user back to the home page
    this.router.navigateByUrl('/');
  });
}

【讨论】：