Angular2 canActivate() 调用异步函数 [英] Angular2 canActivate() calling async function

问题描述

我正在尝试使用 Angular2 路由器防护来限制对我应用程序中某些页面的访问.我正在使用 Firebase 身份验证.为了检查用户是否使用 Firebase 登录，我必须使用回调在 FirebaseAuth 对象上调用 .subscribe() .这是守卫的代码:

I am trying to use Angular2 router guards to restrict access to some pages in my app. I am using Firebase Authentication. In order to check if a user is logged in with Firebase, I have to call .subscribe() on the FirebaseAuth object with a callback. This is the code for the guard:

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AngularFireAuth } from "angularfire2/angularfire2";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        this.auth.subscribe((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        });
    }
}

当导航到有保护的页面时，authenticated 或 notauthenticated 会打印到控制台(经过一段时间等待来自火力基地).但是，导航永远不会完成.另外，如果我没有登录，我会被重定向到 /login 路由.所以，我遇到的问题是 return true 没有向用户显示请求的页面.我假设这是因为我正在使用回调，但我无法弄清楚如何去做.有什么想法吗?

When a navigate to a page that has the guard on it, either authenticated, or not authenticated is printed to the console (after some delay waiting for the response from firebase). However, the navigation is never completed. Also, if I am not logged in I am redirected to the /login route. So, the issue I am having is return true doesn't display the requested page to the user. I'm assuming this is because I am using a callback, but I am unable to figure out how to do it otherwise. Any thoughts?

推荐答案

canActivate 需要返回一个完成的 Observable :

canActivate needs to return an Observable that completes:

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        return this.auth.map((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        }).first(); // this might not be necessary - ensure `first` is imported if you use it
    }
}

缺少 return 并且我使用 map() 而不是 subscribe() 因为 subscribe()> 返回一个 Subscription 而不是 Observable

There is a return missing and I use map() instead of subscribe() because subscribe() returns a Subscription not an Observable

这篇关于Angular2 canActivate() 调用异步函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！