“Property pipe does not exist on type Observable.”

huangapple go评论88阅读模式
英文:

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 &quot;@angular/core&quot;;
import {
Router,
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
}  from &quot;@angular/router&quot;;

import { AuthService } from &quot;../login/auth.service&quot;;
import { map, take } from &quot;rxjs/operators&quot;;
import { merge } from &quot;rxjs&quot;;
import { Observable } from &quot;rxjs&quot;;

@Injectable({ providedIn: &quot;root&quot; })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthService
) {}

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable&lt;boolean&gt; {
return this.authenticationService.isLoggedIn().pipe(
  take(1),
  map(isLoggedIn =&gt; {
    if (isLoggedIn) {
      return true;
    } else {
      return false;
    }
   })
 );
 }
}

Here is my AuthService:

 import { Injectable } from &quot;@angular/core&quot;;
 import { HttpClient } from &quot;@angular/common/http&quot;;
 import { Observable, BehaviorSubject } from &quot;rxjs&quot;;
 import { map } from &quot;rxjs/operators&quot;;

 @Injectable({
 providedIn: &quot;root&quot;
 })
export class AuthService {
url = &quot;http://localhost:8098/login&quot;;

isLogged: BehaviorSubject&lt;boolean&gt; = new BehaviorSubject&lt;boolean&gt;(false);

 constructor(private http: HttpClient) {
  this.isLogged = new BehaviorSubject&lt;boolean&gt;(this.tokenAvailable());
 }

 isLoggedIn() {
   return this.isLogged.asObservable;
 }

 public login(credential): Observable&lt;boolean&gt; {
 return this.http.post(this.url, credential).pipe(
  map(data =&gt; {
    localStorage.setItem(&quot;token&quot;, data[&quot;token&quot;]);
    this.isLogged.next(true);
    return true;
  })
  );
 }

 public logout() {
   localStorage.removeItem(&quot;token&quot;);
   this.isLogged.next(false);
 }

  getToken(): string {
    let token = localStorage.getItem(&quot;token&quot;);
    return token;
  }

 tokenAvailable(): boolean {
   let token = this.getToken();
   return !token ? false : true;
  }
 }

And here is my package.json

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

答案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();

huangapple
  • 本文由 发表于 2020年1月3日 22:44:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/59580528.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定