2017-07-03 68 views
1

我想複製angular-realworld-example-app,但我遇到了一個我不明白的錯誤。 (我正在使用RxJS 5.4.0和Angular 4.2.5)。ReplaySubject是不是一個功能

我的路線「登陸」具有保護「無驗證衛士」,以檢查用戶是否已經登錄。只有「非登錄」用戶可以在「登錄」。警衛檢查用戶是否登錄,並否定答案(bool =>!bool)以確定用戶是否可以通過。

User.service.ts:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { ReplaySubject } from 'rxjs/ReplaySubject'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 


import { ApiService } from './api.service'; 
import { JwtService } from './jwt.service'; 
import { User } from '../models/user.model'; 


@Injectable() 
export class UserService { 
    private currentUserSubject = new BehaviorSubject<User>(new User()); 
    public currentUser = this.currentUserSubject.asObservable().distinctUntilChanged(); 

    private isAuthenticatedSubject = new ReplaySubject<boolean>(1); 
    public isAuthenticated = this.isAuthenticatedSubject.asObservable(); 

    constructor (
     private apiService: ApiService, 
     private http: Http, 
     private jwtService: JwtService 
    ) {} 

    // Verify JWT in localstorage with server & load user's info. 
    // This runs once on application startup. 
    populate() { // THIS IS CALLED IN APP.COMPONENT 
     // If JWT detected, attempt to get & store user's info 
     if (this.jwtService.getToken()) { 
      this.apiService.get('/user') 
       .subscribe(
        data => this.setAuth(data.user), 
        err => this.purgeAuth() 
       ); 
     } else { 
      // Remove any potential remnants of previous auth states 
      this.purgeAuth(); 
     } 
    } 

    setAuth(user: User) { 
     // Save JWT sent from server in localstorage 
     this.jwtService.saveToken(user.token); 
     // Set current user data into observable 
     this.currentUserSubject.next(user); 
     // Set isAuthenticated to true 
     this.isAuthenticatedSubject.next(true); 
    } 

    purgeAuth() { 
     // Remove JWT from localstorage 
     this.jwtService.destroyToken(); 
     // Set current user to an empty object 
     this.currentUserSubject.next(new User()); 
     // Set auth status to false 
     this.isAuthenticatedSubject.next(false); 
    } 

    attemptAuth(type, credentials): Observable<User> { 
     const route = (type === 'login') ? '/login' : ''; 
     return this.apiService.post('/user' + route, {user: credentials}) 
      .map(
       data => { 
        this.setAuth(data.user); 
        return data; 
       } 
      ); 
    } 

    getCurrentUser(): User { 
     return this.currentUserSubject.value; 
    } 
} 

無AUTH-guard.service.ts:

import { Injectable } from '@angular/core'; 
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

import { UserService } from '../services/user.service'; 

@Injectable() 
export class NoAuthGuard implements CanActivate { 
    constructor(
     private router: Router, 
     private userService: UserService 
    ) {} 

    canActivate(
     route: ActivatedRouteSnapshot, 
     state: RouterStateSnapshot 
    ): Observable<boolean> { 

     return this.userService.isAuthenticated.take(1).map(bool => !bool); 
    } 
} 

儘管更新我進口,我還收到一個錯誤採取的是不是一個函數Getting boolean value from ReplaySubject<boolean> asObservable

Error: Uncaught (in promise): TypeError: this.userService.isAuthenticated.take is not a function 
TypeError: this.userService.isAuthenticated.take is not a function 

類似,但不重複

+3

take是一個像地圖一樣的運算符。它必須被導入。 – cgTag

+0

謝謝,這導致我在正確的方向+1 – Moshe

回答

2

我們可以通過兩種方式來解決它。

import 'rxjs/add/operator/take'; 

這很可能是進口的特定運營商爲你服務。

import { Observable } from 'rxjs'; 

我喜歡上面的語句,因爲它提供了你需要在可觀察到的,而不是一個單獨的import語句爲運營商所有運營商。

+0

導入全庫會減慢我的應用程序啓動時,通過單獨導入它們,我更加意識到我的用法。謝謝 – Moshe