Angular - Response is not assignable to type 'request?: HttpRequest

Question

I try to write an AuthGuard in Angular but i get the following Error:

Type 'typeof AuthServiceService' is not assignable to type '(request?: HttpRequest) => string | Promise'. Type 'typeof AuthServiceService' provides no match for the signature '(request?: HttpRequest): string

This is my auth-service.service.ts:

@Injectable({
  providedIn: 'root'
})
export class AuthServiceService {

  constructor(
    private http:HttpClient,
    public jwtHelper: JwtHelperService) { }
  login(data):Observable<any>{
    return this.http.post(baseUrl + 'ApplicationUser/login' ,data)

  }

  handleError(error: HttpErrorResponse) {
    return throwError(error);
  }

  public isAuthenticated(): boolean {
    const token = localStorage.getItem('token');
    return !this.jwtHelper.isTokenExpired(token);
  }

}

Here is my AuthGuard Service:

import { AuthServiceService } from 'src/services/auth/auth/auth-service.service';
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthServiceService, public router: Router) { }
  
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['']);
      return false;
    }
    return true;
  }
}

I get this error on this line on tokenGetter:

const JWT_Module_Options: JwtModuleOptions = {
  config: {
    tokenGetter: AuthServiceService
  }
};

Can somebody help me what the response from AuthService should look like?

`Observables` only fire when they have a subscriber. Instead of returning from the constructor (?) add a `subscribe` block where you do your work (presumably, set the auth token in `localStorage`. — The Head Rush, Oct 10 '20 at 14:46
how you are defining the AuthGuard component..? it gives good idea about your issue if you added that code too.. — Ganesh, Oct 10 '20 at 14:46
where you are getting the above compilation error, can you show that as well.. — Ganesh, Oct 10 '20 at 15:16

score 1 · Accepted Answer · answered Oct 10 '20 at 15:51

After some research i have found the solution. The tokenGetter Option needs a string with my token - so i returned the token from the local storage like below:

const JWT_Module_Options: JwtModuleOptions = {
  config: {
    tokenGetter: () => {
      return localStorage.getItem('token')
    }
  }
};

Now my AuthGuard works as expected :) Thank you all for help! :)

score 0 · Answer 2 · answered Oct 10 '20 at 15:22

0

Your code seems fine (at least for me) except one issue is that initializing method inside of the constructor

 constructor(private http:HttpClient,
    public jwtHelper: JwtHelperService) { }
  login(data):Observable<any>{
    return this.http.post(baseUrl + 'ApplicationUser/login' ,data)

  }

change this to below

  constructor(private http:HttpClient, public jwtHelper: JwtHelperService) { }
    
  login(data): Observable<any> {
      return this.http.post(baseUrl + 'ApplicationUser/login' ,data)
  }

answered Oct 10 '20 at 15:22

Ganesh

5,808
2
21
41

Thank you! i formatted my code as you suggested. But sadly this was not the solution. – Léon Zimmermann Oct 10 '20 at 15:30
I have edit my post with the code where i get the error: const JWT_Module_Options: JwtModuleOptions = { config: { tokenGetter: AuthServiceService } }; – Léon Zimmermann Oct 10 '20 at 15:37
then it's clearly saying pre-defined `JwtModuleOptions` class param `tokenGetter` expecting the `HttpRequest` as param. did you tried this one.. – Ganesh Oct 10 '20 at 15:45

Angular - Response is not assignable to type 'request?: HttpRequest

2 Answers2