localstorage not getting refreshed in angular service

user_5201592 0
Viewed 2916

i am using angular 6 and localStorage for saving auth token.

the code which gets authtoken from localStorage is:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + JSON.parse(localStorage.getItem('userdetails')).token
  })
};

and use it as

getCities() {
    return this.http.get<any>('http://myservice.com/api/cities', httpOptions);
  }

when i log out i am clearing localStorage and redirecting to home page as

localStorage.clear();
  this.router.navigate(['/']);

when i login, i am setting the userdetails localStorage item as 

this.loginService.login(obj)
            .subscribe(
                auth => {
                                               localStorage.setItem('userdetails', JSON.stringify(auth));
                    this.router.navigate(['authentication/auth/redirectpage']);

                }
            );

My auth object i am saving is like this:

{"fullname":"Test User","username":"TestUser1","authlevel":"Q","designation":"Tester 1","token":"First_Login_Token"}

When i first login, everything is working fine. When i logout, userdetails localStorage element is getting destroyed (when checked in the Local Storage in Application tab of Chrome DevTools.

When i relogin with different user, my userdetails is getting updated properly to

{"fullname":"Test User 2","username":"TestUser2","authlevel":"R","designation":"Tester 2","token":"Second_Login_Token"}

BUT

localStorage.getItem('userdetails')).token in locationService returns First_Login_Token only.

If i reload the page, it is properly taking Second_Login_Token.

Unsure of what is going wrong.

angular-services angular local-storage javascript
2 Answers

ok, i found the issue.

const httpOptions

is the culprit.

I have made it a variable in the class and am setting it in every method like 

export class LocationService {

  httpOptions: any;

  constructor(private http: HttpClient) {
  }


  getcities() {
    this.httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + JSON.parse(localStorage.getItem('userdetails')).token
      })
    };
    return this.http.get<any>('http://myservice.com/api/cities', this.httpOptions);
  }

.
.
.

now, its all fine. thanks anyways!!!

user_52015920

I got nearly the same issue, found out the I called localStorage in the declaration part that's why it came null. You should declare the variable first then if you have localstorage call it after the constructor. Thanks Lakshman!

service.ts header: any

constructor

header = localStorage....

user_114162450
Related