JWT and Angular 7 returning Token null value in the application

Question

My JWT application has the following code:

my Model of user:

export class User {
    id: number;
    username: string;
    password: string;
    name: string;
    admin: boolean;
    token?: string;
}

The ts of the Login is:

this.authenticationService.login(this.f.username.value, this.f.password.value, this.fingerprint, this.admin)
      .pipe(first())
      .subscribe(
        user => {
          this.router.navigate(['/']);
        },
        error => {
          this.error = error;
          this.loading = false;
        });
  }

My headline is like this:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json;charset=UTF-8',
    'Accept-Language': '1'
  }),
};

The login call is like this:

 login(username: string, password: string, fingerprint: string, admin: boolean) {
    return this.http.post<any>("http://site.com/url/login", { username, password, admin, fingerprint}, httpOptions)
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
              console.log("USER: " + user);

                if (user) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));
    }

my contractor is like this:

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;

        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                  'Authorization': `Bearer ${currentUser.token}`,
                  'Accept-Language': '1'
                }
            });
        }

        return next.handle(request);
    }

Accessing the network tab. It does the request and returns 200 normally and the token appears in the header, but when I try to use the map to get the answer, in the application it is returning null. I have tested several methods and continues as null.

I’m making based on the jasonwatmore code of angular jwt 7;

Below is the return 200 and the token

Someone’s been through it?

Answer 1

From what I understand, your problem is getting access to your JWT token in the answer of your login POST call, right?

In this case, for it to work the way it expects, the implementation would have to be similar to the one I put below.

O ts de login:

this.authenticationService.login(this.f.username.value, this.f.password.value, this.fingerprint, this.admin)
      .subscribe(
        user => {
          this.router.navigate(['/']);
        },
        error => {
          this.error = error;
          this.loading = false;
        });
  }

Header:

   const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json;charset=UTF-8',
        'Accept-Language': '1'
      }),
      observe: 'response'
    };

Login service:

    login(username: string, password: string, fingerprint: string, admin: boolean) {
        return this.http.post<any>("http://site.com/url/login", { username, password, admin, fingerprint}, httpOptions)
                .pipe(map(response => {
                  let user = {token: response.headers.Authorization}
                  // login successful if there's a jwt token in the response
                  console.log("USER: " + user);

                    if (user) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user));
                        this.currentUserSubject.next(user);
                    }

                    return user;
                }));
        }

Interceptor:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;

        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                  'Authorization': `${currentUser.token}`,
                  'Accept-Language': '1'
                }
            });
        }

        return next.handle(request);
    }

Answer 2

I think you do not need to pass a new header at the time of the POST, because you are already setting in the Third Party, I think it may be being replaced and running out of Token. Try to do the post by just passing the URL and BODY.

Answer 3

The login function is returning an HTTP request, how is the implementation of this Observable Subscription? To access the response header, you would need to add the 'note: "Response"' property to the httpOptions object. Thus, your user would have all the information from the POST response. It would be interesting to post more code details and, if possible, contract details of this HTTP call, allowing a better understanding of your problem.