我想複製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
類似,但不重複
take是一個像地圖一樣的運算符。它必須被導入。 – cgTag
謝謝,這導致我在正確的方向+1 – Moshe