AngularFire/Firebase - AuthGuard未解析的函数或方法图（）

问题描述：

尝试为我的路由实现canActivate。登录和连接到firebase是好的，但我尝试使用下面的代码canActivate和我不断收到有关未解决的函数或方法map（）的错误。我已确保一切正确导入。AngularFire/Firebase - AuthGuard未解析的函数或方法图（）

import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/take'; 

import { Injectable } from '@angular/core'; 
import { CanActivate, Router } from '@angular/router'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { Observable } from 'rxjs/Observable'; 


@Injectable() 
export class AuthGuard implements CanActivate { 

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

canActivate(): Observable<boolean> { 
return this.afAuth.authState 
    .take(1) 
    .map(authState => !!authState) 
    .do(authenticated => { 
    if (!authenticated) { 
     this.router.navigate([ '/error' ]); 
    } 
    }); 
} 
}

AuthService.ts

import { Injectable } from '@angular/core'; 

import { AngularFireAuth } from 'angularfire2/auth'; 
import * as firebase from 'firebase/app'; 

import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class AuthService { 

    user: Observable<firebase.User>; 

    constructor(private firebaseAuth: AngularFireAuth) { 
    this.user = firebaseAuth.authState; 
    } 

    login(email: string, password: string) { 
    this.firebaseAuth 
     .auth 
     .signInWithEmailAndPassword(email, password) 
     .then(value => { 
     console.log('Logged in!'); 
     }) 
     .catch(err => { 
     console.log('Error while logging in!', err.message); 
     }); 
    } 

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

你在'app.module.ts'中注册了吗？ – Hareesh

AuthGuard位于提供程序数组中。 – Brns

你的代码对我来说很好，请查看这个[page]（https://github.com/angular/angularfire2/issues/282）。 – Hareesh

答

一两件事我注意到你需要返回真或假的布尔函数

试试这个

canActivate(): Observable<boolean> { 
return this.afAuth.authState 
    .take(1) 
    .map(authState => !!authState) 
    .do(authenticated => !authenticated ? this.router.navigate(['/error']) : true); 
}

答

既然你+ AngularFire是从rxjs/Observable导入Observable而不是'rxjs/Rx'以减少包的大小，您还需要导入您想要使用的RxJS操作员。

import 'rxjs/add/operator/map';

AngularFire/Firebase - AuthGuard未解析的函数或方法图（）

相关推荐