I'm using NestJS backend, where I pass JWT token to the Angular application. I made a login, where frontend pass the JWT token, but don't know, how can I decode the JWT token to get the userid value from the payload. I'm getting this error:

No overload matches this call. Overload 1 of 3, '(token: string): any', gave the following error. Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 3, '(token: Promise): Promise', gave the following error. Argument of type 'string | null' is not assignable to parameter of type 'Promise'. Type 'null' is not assignable to type 'Promise'.

I wanted to get the GetUserID() from authentication.service.ts to the component, where I want to call this function, but got this error. Here is my full code:

authentication.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { JwtHelperService } from '@auth0/angular-jwt';

export interface LoginForm {
  username: string;
  password: string;
}

export const JWT_NAME = 'token';

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

  constructor(private http: HttpClient, private jwtHelper: JwtHelperService) { }

  login(loginForm: LoginForm){
    return this.http.post<any>(`http://localhost:3000/login`, {username: loginForm.username, password: loginForm.password}).pipe(
      map((token) => {
        console.log('token')
        localStorage.setItem(JWT_NAME, token.access_token);
        return token
      })
    )
  }

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

  getUserID() {
    const token = localStorage.getItem(JWT_NAME)
    return this.jwtHelper.decodeToken(token)
  }

CodePudding user response：

The error message provides the necessary information to resolve the issue. The function you are trying to call requires a string argument, but it appears that it is receiving a value of type string | null.

To resolve the issue, you should check the type of the value returned by localStorage.getItem(). This method returns either a string or null, as the key being requested may or may not exist in the local storage.

You can add a type check to ensure that the value is a string before passing it to the function:

const token = localStorage.getItem('token');

if (token) {
    // call the function with the token (it's a string now that we checked)
} else {
    // handle the case where the token is null
}

Let me know if you need further assistance.

CodePudding user response：

You don't have to decode anything in your frontend application! When the user logs in you store the received token in localStorage then you send it with every request the user make and keep your backend handle expiration and authorization stuff.

This is how JWT tokens are supposed to be used