英文:
Property pipe does not exist on type Observable
问题
I am developing an auth guard in angular 8, but I'm getting the following error:
> Property pipe does not exist on type Observable
This is happening when I call the isLoggedIn() function from the "canActivate" function which return Observable of AuthService class.
Follows the AuthGuard service which implements the CanActivate interface:
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;
}
})
);
}
}
Here is my 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;
}
}
And here is my package.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"
}
}
英文:
I am developing an auth guard in angular 8, but I'm getting the following error:
> Property pipe does not exist on type Observable
This is happening when I call the isLoggedIn() function from the "canActivate" function which return Observable of AuthService clas.
Follows the AuthGuard service which implements the CanActivate interface:
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;}}));}}
Here is my 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;}}
And here is my package.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"}}
答案1
得分: 3
asObservable 是一个函数而不是属性，可以在这里看到。
所以你需要在你的 AuthService 中这样调用它：
export class AuthService {......isLoggedIn() {return this.isLogged.asObservable();}......}
如果你想了解更多关于 BehaviorSubject 的信息，你可以查看这里，关于 rxjs pipes 的更多信息可以在这里找到。
英文:
The asObserbalbe is a function and not a property, as can be seen in here.
So you need to call it in your AuthService like this:
export class AuthService {......isLoggedIn() {return this.isLogged.asObservable();}......}
If you want to know more about BehaviorSubject you can check this and more about rxjs pipes in here.
答案2
得分: 2
asObservable() 是一个函数，你需要用 () 调用它。
英文:
asObservable() is a function, you need to call it with ()
答案3
得分: 0
asObservable 是一个函数，因此你的 isLoggedIn 方法应该返回 this.isLogged.asObservable()；
英文:
asObservable is a function so your isLoggedIn method shold return this.isLogged.asObservable();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论