CODEWITHSUNDEEP
angularoauth
Khan
Khan

Reputation: 5214

Angular 8 clearing localStorage on logout

I am using localStorage for auth token. to save it I am using localStorage.setItem('token','value') and to remove it I am using localStorage.clear() and both working fine. But when I logged in with another user the service constructor is till sending the previous token which is actually deleted from localStorage(). service constructor is below

  token: string;
  constructor(private http: HttpClient) {
    const user = JSON.parse(localStorage.getItem('eq_user'));
    if ( user ) {
      this.token = user.access_token;
    }
  }

Login:

login() {
  this.auth.login(data).subscribe((response: UserToken) => {
    localStorage.setItem('eq_user', JSON.stringify(response));
    this.router.navigate([this.returnUrl]);
  },
  error => {
    this.error = true;
    this.errorMsg = error.message;
  }
}

Logout

onLogout() {
    localStorage.removeItem('eq_user');
    localStorage.clear();
    this.authService.logout().subscribe( s => {
        this.route.navigate(['login']);
   });
  }

following is link identical to my issue.

https://stackblitz.com/

First click on setValue and then click on A from Component and A from Service, on first time it will take the correct value. But when you click again on setValue and then click on the other two buttons the Component button return fresh value but the service is not returning the fresh values.

Upvotes: 2

Views: 14288

Answers (3)

abd995
abd995

Reputation: 1839

The constructor of a singleton service is called only once that is during loading of the app. I assume your service is singleton. So the logic written inside the constructor will not execute more than once. You have to set the token inside login method also, which runs every time a user login. Also remove the token when user logout.

login() {
    this.auth.login(data).subscribe((response: UserToken) => {
      this.token = response.access_token;
      localStorage.setItem('eq_user', JSON.stringify(response));
      this.router.navigate([this.returnUrl]);
    },
    error => {
      this.error = true;
      this.errorMsg = error.message;
    }
  }


onLogout() {
    this.token = null;
    localStorage.removeItem('eq_user');
    localStorage.clear();
    this.authService.logout().subscribe( s => {
        this.route.navigate(['login']);
   });
  }

I have updated your example stackblitz code with the changes I mentioned above - https://stackblitz.com/edit/angular-cz5huh

Upvotes: 2

Khan
Khan

Reputation: 5214

After spending almost a day how to send the fresh token I come up with the solution that It can be easily done by using HttpInterceptor, if you define a custom interceptor for headers then you don't need to look for token in your service, the interceptor will add the Bearer TOKEN to all http requrest.

Click here for more details

Upvotes: 2

Ashish S
Ashish S

Reputation: 728

See, angular services are singleton services when declared in root. So your constructor will be called just once and at that time it stores the token. So when you are clearing the localstorage you have to clear the variable. You can create a clear function in your service to clear the token variable. And call that function when you logout.

Upvotes: 1

Related Questions