英文:
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()
;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论