在 Angular2 中的身份验证之后重定向

Question

所以我有一个简短的问题。我有一个登录页面，其中包含一些用于登录的社交媒体图标。我想要实现的是，当他们单击按钮并授权它时，他们会被重定向到一个新页面。但是，现在发生的事情是它们只是保留在/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 代码片段

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
});
}

任何帮助将不胜感激。

Answer 1

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

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

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