Angular php-jwt token cleared on page navigation

I'm having issues with my application, I used php-jwt JSON Web Token Authentication in my angular 9 apps and the token works fine when I'm not redirecting to successful page after login. when redirecting to the dashboard after login the token is set and immediately remove from localStorage. How can I allow token even after redirection to new page? Any help will be highly appreciated.

My auth.service.ts file

 // Sign-in
  signIn(user: Usermodule) {
    return this.http
      .post<any>(`${this.endpoint}/signin.php`, user)
      .subscribe((res: any) => {
        localStorage.setItem('ACCESS_TOKEN', res.jwt);
        this.getUserProfile(res.id).subscribe((res) => {
          
             this.router.navigate(['app/dashboard']);
         
         
        });

      });
  }

  // User profile
  getUserProfile(id): Observable<any> {
    let api = `${this.endpoint}/user_profile.php`;
    return this.http.get(api, { headers: this.headers }).pipe(
      map((res: Response) => {
        return res || {};
      }),
      catchError(this.handleError)
    );
  }
Copy code

auth.interceptors.ts file

export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    const access_Token = this.authService.getToken();

    request = request.clone({
        setHeaders: {
          Authorization: 'Bearer ' + access_Token,
        },
      });
  

    return next.handle(request);
  }
}
Copy code

app.module.ts file

   JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('ACCESS_TOKEN');
        }
        // whitelistedDomains: ['localhost'],
        // blacklistedRoutes: ['localhost/auth/login']
      }
    })
  ],
  providers: [
    AuthService,
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi:true}
  ],
  bootstrap: [AppComponent]

Copy code

Once I comment out //this.router.navigate(['app/dashboard']); the token stays in localstorage without been killed and I can even access restricted area when I type the address manually.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.