属性管道在"可观察"类型上不存在

Question

我正在角 8 中开发一个身份验证保护，但我收到以下错误：

属性管道在"可观察"类型上不存在

当我从返回 AuthService clas 的 Observable 的 "canActivate" 函数调用isLoggedIn()函数时，就会发生这种情况。

遵循实现CanActivate接口的AuthGuard服务：

import { Injectable } from "@angular/core";
import {
Router,
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
}  from "@angular/router";
import { AuthService } from "../login/auth.service";
import { map, take } from "rxjs/operators";
import { merge } from "rxjs";
import { Observable } from "rxjs";
@Injectable({ providedIn: "root" })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthService
) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.authenticationService.isLoggedIn().pipe(
take(1),
map(isLoggedIn => {
if (isLoggedIn) {
return true;
} else {
return false;
}
})
);
}
}

这是我AuthService：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable, BehaviorSubject } from "rxjs";
import { map } from "rxjs/operators";
@Injectable({
providedIn: "root"
})
export class AuthService {
url = "http://localhost:8098/login";
isLogged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor(private http: HttpClient) {
this.isLogged = new BehaviorSubject<boolean>(this.tokenAvailable());
}
isLoggedIn() {
return this.isLogged.asObservable;
}
public login(credential): Observable<boolean> {
return this.http.post(this.url, credential).pipe(
map(data => {
localStorage.setItem("token", data["token"]);
this.isLogged.next(true);
return true;
})
);
}
public logout() {
localStorage.removeItem("token");
this.isLogged.next(false);
}
getToken(): string {
let token = localStorage.getItem("token");
return token;
}
tokenAvailable(): boolean {
let token = this.getToken();
return !token ? false : true;
}
}

这是我的包.json

{
"name": "angular-auth",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"jwt-decode": "^2.2.0",
"rxjs": "^6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.21",
"@angular/cli": "~8.3.21",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

Answer 1

asObserbalbe是一个函数而不是一个属性，如图所示。

所以你需要像这样在AuthService中调用它：

export class AuthService {
......
isLoggedIn() {
return this.isLogged.asObservable();
}
......
}

如果您想了解有关BehaviorSubject的更多信息，可以在此处查看此内容以及有关rxjs pipes的更多信息。

Answer 2

asObservable()

是一个函数，你需要用()

Answer 3

>asObservable是一个函数，因此您的isLoggedIn方法应返回this.isLogged.asObservable();