CODEWITHSUNDEEP
angulartypescriptrxjsbehaviorsubject
user2280852
user2280852

Reputation: 187

Angular Behavior Subject For Login Not Working as Expected

:

I'm using RXJs Behavior Subject to add the username of logged in user on my header, when user logs in there username should appear without having to reload. In my account service I create a Behavior subject for username and login status. When the user logs out it should remove the name. I still have to reload when user logs in as well as logging out. . I thought I had it working then I made a change and it broke now not working as expected. I can't figure out why its not working. I get the loginStatus, jwt and user name when I look at the local storage using developer tool.

Maybe I have missed something, or I'm over looking something. If someone can't point me in the right direction it would greatly appreciate it.

Snippet of code included.

Account Service

 private UserName = new BehaviorSubject<any>(localStorage.getItem('username'));
 private loginStatus = new BehaviorSubject<boolean>(this.checkLoginStatus());


//Here are my getters
 get currrentUserName(){
    return this.UserName.asObservable();
}

checkLoginStatus(){
    return false;

}

get isLoggedIn(){

    return this.loginStatus.asObservable();

}




logout() {
    
    // Set LoginStatus to false and delete saved cookie
   

    alert("Is it getting to log out");
     this.loginStatus.next(false);
     localStorage.removeItem('jwt');
     localStorage.removeItem('username');
     localStorage.setItem('loginStatus', '0');
     this.router.navigate(['../login']);
     this.alertService.success("Logged out Successful");
     console.log("Logged out successfully")

Header Component:

      loginStatus$!: Observable<boolean>;
      UserName$! : Observable<any>;


 ngOnInit() {


     // getter will return the login status of the user
     this.LoginStatus$ = this.accountService.isLoggedIn;

    //getter return the current value of the loggedin user
    this.UserName$ = this.accountService.currrentUserName;
  }

Header HTML:

    <span class="loggedin-user" style="margin-left:10px" >Hello</span>        
    <i style="color:#D30169" *ngIf="(LoginStatus$ | async) as LoginStatus">
    
      <!--when I add above line to checked if logged in nothing shows so I took it out 
      until can  figure out why.  not working-->

     <a *ngIf="(UserName$ | async) as UserName"> {{UserName | uppercase}}</a>
     </i>

Upvotes: 0

Views: 74

Answers (2)

user2280852
user2280852

Reputation: 187

Its always the small things.

  1. Issue was with in my header component loginStatus$!: Observable;

Since I initialized my getter this.LoginStatus$ = this.accountService.isLoggedIn;

should have been LoginStatus$!: Observable;

  1. CheckLoginStatus(){

return true;

//instead of false

When user logs in username name shows in header, when user logs off the username is removed.

Works as expected!

Upvotes: 0

Antoniossss
Antoniossss

Reputation: 32535

You are not clearing user data when you logging out.

logout() {
   UserName.next(null);
  ....rest of your logout logic
}

Upvotes: 0

Related Questions