AngularFire2：成功登录后如何导航到主组件？

我使用google登录实现了Firebase身份验证（非常有效）。但我无法在成功登录时导航到我的主组件。我怎样才能做到这一点

我已经执行了一项检查，查看我是否已登录，然后导航到主页。它检测到我已登录，但不会导航到我的主组件

路线： 身份验证服务：

user$：可观察；
构造函数（专用路由器：路由器、，
私人afs:AngularFirestore，
私人afAuth:AngularFireAuth）{
this.user$=this.afAuth.authState.pipe(
开关映射（用户=>{
如果（用户）{
返回这个.afs.doc（`users/${user.uid}`）。valueChanges（）；
}否则{
返回（空）；
}
})
);
}
异步googleSignIn（）{
const provider=new auth.GoogleAuthProvider（）；
const credential=等待此.afAuth.auth.signInWithPopup（提供程序）；
返回此.updateUserData（credential.user）；
}
异步签出（）{
等待此消息。afAuth.auth.signOut（）；
返回此.router.navigateByUrl（'login'）；
}
私有updateUserData（用户）{
const userRef:AngularFirestoreDocument=this.afs.doc（`users/${user.uid}`）；
常数数据={
displayName:user.displayName，
电子邮件：user.email，
photoURL:user.photoURL，
uid:user.uid
};
返回userRef.set（数据，{merge:true}）；
}

Authguard：

canActivate（下一步：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.auth.user$.pipe(
以（1）为例，
映射（用户=>！！用户），
点击（loggedIn=>{
控制台日志（loggedIn）；
如果（loggedIn==true）{
log（'inside true function'）；
this.router.navigate（['/hc home']）；
}
如果（！loggedIn）{
log（“拒绝访问”）；
this.router.navigateByUrl（'login'）；
}
})
);

---

我的预期结果是在成功登录后导航到home（这非常有效）但出于某种原因，它检测到我已登录，firebase身份验证和我的控制台确认了这一点，但我一直停留在登录页面上。没有任何错误消息。

在您的身份验证中，如果允许用户导航到指定的url，您需要返回

true

。当前您正在尝试导航te指向url，但实际上没有告诉angular允许用户在那里导航。此外，当允许用户在那里导航时，您不需要尝试导航到主页。您已在路线

hc home

上安装了防护装置，因此angular已经知道在允许的情况下可以在那里导航。请将代码更改为：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.auth.user$.pipe(
    take(1),
    map(loggedIn => {
    if (loggedIn) {
      return true;
    }
    this.router.navigateByUrl('login');
    return false;
    }
  })
);

canActivate（下一步：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.auth.user$.pipe(
以（1）为例，
映射（loggedIn=>{
if（loggedIn）{
返回true；
}
this.router.navigateByUrl（'login'）；
返回false；
}
})
);

---

此外，angularfire还有一个自己的authguard插件，您实际上不需要编写自己的authguard：就像另外一个选项一样。

在您的authguard中，如果允许用户导航到指定的url，您需要返回

true

。当前您正在尝试导航到该url，但不是ac实际告诉angular允许用户在那里导航。另外，当允许用户在那里导航时，您不需要尝试导航到主页。您已在路线

hc home

上安装了防护装置，因此angular已经知道在允许的情况下在那里导航。将代码更改为：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.auth.user$.pipe(
    take(1),
    map(loggedIn => {
    if (loggedIn) {
      return true;
    }
    this.router.navigateByUrl('login');
    return false;
    }
  })
);

canActivate（下一步：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.auth.user$.pipe(
以（1）为例，
映射（loggedIn=>{
if（loggedIn）{
返回true；
}
this.router.navigateByUrl（'login'）；
返回false；
}
})
);

---

还有，Agple Fi火也有自己的AuthGub插件，在那里你实际上不需要写自己的AuthGue:正如另一个选项扔掉一样。

非常感谢！我非常感谢。非常欢迎！如果它帮助和解决了你的问题，请考虑点击投票下的灰色嘀嗒声来接受答案。回答：非常感谢！我非常感谢。非常欢迎！如果它帮助和解决了你的问题，请考虑在答案的投票下点击灰色记号来接受答案。

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.auth.user$.pipe(
      take(1),
      map(user => !!user),
      tap(loggedIn => {
        console.log(loggedIn);
        if (loggedIn === true) {
          console.log('inside true function');
          this.router.navigate(['/hc-home']);
        }
        if (!loggedIn) {
          console.log('Access Denied');
          this.router.navigateByUrl('login');
        }
      })
    );

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.auth.user$.pipe(
    take(1),
    map(loggedIn => {
    if (loggedIn) {
      return true;
    }
    this.router.navigateByUrl('login');
    return false;
    }
  })
);