Angular local storage value being read before set

Question

Im working with an angular application which has a sidebar component. Depending on the role of the user signed in, there will be more options on the sidebar. For example, a superadmin will have an additional dashboard for him.

The issue is the role is being stored in local storage in the app component's ts while it is being retrived in the nav component ngAfterViewInit. But the code in ngAfterViewInit is being executed first such that it gets a null role.

Here is a code snippet:

App.component.ts

constructor
 (private auth: AuthService)

ngOnInit(){
 this.auth.
 authenticate.subscribe(res 
  =>{ this.storageService.
set('userRole', res.role) })

nav.component.ts

ngAfterViewInit(){
   this.role = this.
   storageService.
   get('userRole')

storageservice.ts

get(key: string){
  const keyVal = string | null = 
  localStorage.getItem(key)

   if(stringValue){
      return JSON.parse(keyVal);
  }

}

The value returned is null. I logged it in console n saw that retrieving the value was executed before setting it.

Getting this error:

main.50d4493a21037afa5155.js:1 
    
   ERROR TypeError: Cannot read properties of undefined (reading '0')
at t._next (main.50d4493a21037afa5155.js:1:2189226)
at t.__tryOrUnsub (main.50d4493a21037afa5155.js:1:544147)
at t.next (main.50d4493a21037afa5155.js:1:543316)
at t._next (main.50d4493a21037afa5155.js:1:542366)
at t.next (main.50d4493a21037afa5155.js:1:542037)
at t._next (main.50d4493a21037afa5155.js:1:551777)
at t.next (main.50d4493a21037afa5155.js:1:542037)
at t._subscribe (main.50d4493a21037afa5155.js:1:1526055)
at e._trySubscribe (main.50d4493a21037afa5155.js:1:545724)
at t._trySubscribe (main.50d4493a21037afa5155.js:1:548182)

Im doing a check as posted for role in nav component then assign it to a variable

What is the `storageService` doing? Is it another layer above the built-in `localStorage`? If so, you can convert it to Observable approach and in components, you can _watch_ the changes to the local storage. — Harun Yilmaz, Nov 21 '22 at 17:25

Harun Yilmaz · Answer 1 · 2022-11-21T21:36:38.023

1

What you can do is to create a BehaviorSubject in the StorageService that the components/services can subscribe to and get the latest stored value.

Upon each set call, you can update the BehaviorSubject with the latest value, and all the subscribers will be called. You can use map() pipeable operator to filter by key.

And of course, you need to populate the subject on service startup:

export class StorageService{
  private currentStorage = new BehaviorSubject({});

 constructor() {
    this.updateSubject()
 }

  set(key: string, value: any){
    localStorage.setItem(key, value);
    this.updateSubject();
  }


  updateSubject(){
    this.currentStorage.next({...localStorage})
  }

  get(key: string){
    return localStorage.getItem(key)
  }

  watch(key: string){
    return this.currentStorage.pipe(
      map(items => items[key])
    )
  } 
}

In the app.component, you can set the value like before:

ngOnInit(){
   this.auth.authenticate.subscribe(res =>{ this.storageService.
set('userRole', res.role) }
   )
}

And in the nav.component, you can subscribe to it like this:

ngAfterViewInit(){
   this.storageService.watch('userRole').subscribe(role => this.role = role)
}

You can find a working example here: https://stackblitz.com/edit/angular-ivy-ffp2qi?file=src/app/storage.service.ts

edited Nov 21 '22 at 21:36

answered Nov 21 '22 at 17:47

Harun Yilmaz

8,281
3
24
35

actually I need to set the key in app component itself – user20565161 Nov 21 '22 at 18:04
What I posted is actually what you're asking. Please see the updated answer – Harun Yilmaz Nov 21 '22 at 18:10
getting an error for the map. Its expecting 2 args – user20565161 Nov 21 '22 at 18:35
Do you import `map` from `rxjs` like this `import { map } from 'rxjs';`? – Harun Yilmaz Nov 21 '22 at 18:46
i did this. But overall solution does not work. – user20565161 Nov 21 '22 at 19:15
Oops... I forgot to save the project. Can you please check the example project linked above? – Harun Yilmaz Nov 21 '22 at 19:17
man that spread in localStorage is neat! – Jimmy Nov 21 '22 at 19:57
@Jimmy Thank you! But all the credit for that goes to Alexey in [this answer](https://stackoverflow.com/a/51647623/1331040) :) – Harun Yilmaz Nov 21 '22 at 20:12
@user20565161 Updated the answer. You need to populate the subject with the stored items upon the service creation. – Harun Yilmaz Nov 21 '22 at 21:37
@HarunYilmaz, getting an error in console. TypeError: Cannot read properties of undefined (reading '0') at t._next () – user20565161 Nov 22 '22 at 06:55
Can you please post the full output of the error? And how are you trying to use the value `this.role` in the component? – Harun Yilmaz Nov 22 '22 at 17:59
It's not clear but are you trying to use it like `this.role[0]` or something? If so, note that the initial subscription callback may return `undefined`. – Harun Yilmaz Nov 22 '22 at 20:54
@HarunYilmaz, correct. How do I handle it ? – user20565161 Nov 23 '22 at 03:56
You can use [`optional chaining`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) to avoid getting an exception `this.role?.[0]`. Or you can use `if(this.role){ doSomething(this.role[0]) }` – Harun Yilmaz Nov 23 '22 at 09:28

Angular local storage value being read before set

1 Answers1