I am currently working with an Observable that checks if a key is stored in the browser's local storage. The value from this observable is utilized in another observable. However, I have observed that there are discrepancies between the values displayed in the logs of the Development Command Prompt and the browser console.
checkIfUserIsStoredInLocal(): Observable<boolean> {
const localStorage = this.document.defaultView?.localStorage;
if (localStorage!== undefined) {
if (localStorage.getItem("currentAppUser") !== null) {
var currentUserLocal = localStorage.getItem("currentAppUser");
this.currentUser = JSON.parse(currentUserLocal!);
this.currentUserProfileBS.next(this.currentUserProfile);
console.log("User exists in local");
return of(true);
};
return of(false);
}
return of(false);
}
initializeComponentLogin(): Observable<boolean> {
var initialization: Observable<any> = this.checkIfUserIsStoredInLocal().pipe(
take(1),
tap(x => console.log("data from $ is " + x)),
tap(() => console.log("Current user is " + this.currentUser)),
);
return initialization;
}
Output from Developer Command Prompt: https://i.sstatic.net/jpPNBOFd.png
Output from Browser Console:
https://i.sstatic.net/53PnuwYH.png
I came across this issue while attempting to use the data stored in local storage within another observable using concatMap, but encountered an undefined error. I am uncertain if the observables are being chained correctly. My goal is to first check if the user exists in local storage, then authenticate that user to the server, followed by retrieving additional details about the authenticated user from the server.