Angular 角度4，带角度火力2和认证防护装置

我已经开始创建一个简单的应用程序，它有一个预登录和后登录部分。我正在使用FireBase（带有AngularFire2）作为身份验证提供程序，我想在身份验证保护服务中使用

canActivate（）

来“保护”登录后的页面

我的问题是，我不知道每段代码的顺序或位置。我已经简化了以下内容：

app.component.ts

constructor(private auth: Authentication) {
    this.auth.subscribe();
}

身份验证.ts

export class Authentication {

    state: Observable<firebase.User>;
    user: any;
    isLoggedIn: boolean;

    constructor(private afAuth: AngularFireAuth, private router: Router) {
        this.state = afAuth.authState;
    }

    subscribe() {
        this.state.subscribe((auth) => {
            if(auth) {
                this.user = auth;
                console.log(this.user);
                this.isLoggedIn = true;
                return true;
            } else {
                this.isLoggedIn = false;
                return false;
            }
        });
    }

    login() {
        this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    }

    logout() {
        this.afAuth.auth.signOut();
    }
}

现在，它几乎起作用了。当我重新开始时，我会看到一个屏幕，屏幕顶部有我所有的链接、一个登录和一个注销按钮。当我点击屏幕顶部的链接时，我会看到console.log上写着“CanActivateFalse”，这很完美。我还没有登录

当我登录，然后再次尝试的链接，我得到了“可以激活真的”，这也是完美的

当我再次注销并且没有刷新时，我尝试单击上面的链接，但没有返回任何console.log

我觉得我的订阅有点问题，或者只是总体上有点问题。我可能做错了什么？

试试这个：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.af.authState.map(auth => {
    if (isNullOrUndefined(auth)) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  });
}

canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回这个.af.authState.map（auth=>{
if（isNullOrUndefined（auth））{
this.router.navigate（['/login']）；
返回false；
}否则{
返回true；
}
});
}

---

这要容易得多。不要乱搞aync和同步功能。

您可以使用AngularFireAuthGuard来处理这种情况

将以下行添加到routing.module.ts：

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);

    path: '',
    component: UserDashboardComponent,
    //data: { title: 'user.dashboard' },
    canActivate: [AngularFireAuthGuard],
    data: {authGuardPipe: redirectUnauthorizedToLogin}

---

如果用户未通过身份验证，则被截取的代码将执行重定向。而且它易于实现

我得到一个错误，

属性“map”在类型“Observable”上不存在。

。我正在研究angularfire2 4.0.0-rc.0是否正确，这就是我使用的：

“angularfire2”：“^4.0.0-rc.0”，

和firebase ^3.9.0尝试添加

导入'rxjs/add/operator/map'
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);

    path: '',
    component: UserDashboardComponent,
    //data: { title: 'user.dashboard' },
    canActivate: [AngularFireAuthGuard],
    data: {authGuardPipe: redirectUnauthorizedToLogin}