Can anyone help me solve the mystery of why my user value turns null after I log in?
This is the login page where an API is called and the result is obtained as shown below:
https://i.stack.imgur.com/kDjSy.png
Here is the authentication service implementation:
export class AuthenticationService {
private userSubject: BehaviorSubject<User>;
public user: Observable<User>;
constructor(
private router: Router,
private http: HttpClient
) {
this.userSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('user')));
this.user = this.userSubject.asObservable();
}
public get userValue(): User {
return this.userSubject.value;
}
GetUsername(): string {
if (localStorage.getItem('currentUser') != null)
return JSON.parse(localStorage.getItem('currentUser')).UserName;
return null;
}
login(username: string, password: string) {
return this.http.post<any>(`${Statics.ApiUrl}users/authenticate`, { Username: username, Password: password }, { responseType: "json" })
.pipe(map(user => {
debugger;
localStorage.setItem('user', JSON.stringify(user));
this.userSubject.next(user);
return user;
}));
}
logout() {
//remove user from local storage to log user out
localStorage.removeItem('user');
this.userSubject.next(null);
this.router.navigate(['/login']);
}
signUp(RegisterModel: RegisterModel): Observable<User> {
return this.http.post<User>(`${Statics.ApiUrl}users/signup`, RegisterModel, { responseType: "json" });
}
verifyUserPhone(username: string, password: string, verificationCode: string): Observable<User> {
return this.http.put<User>(Statics.ApiUrl + 'users/verifyUserPhone', { username, password, verificationCode }, { responseType: "json" });
}
}
Now let's take a look at the authguard used:
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthenticationService
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
debugger;
const user = this.authenticationService.userValue;
var token_expiration=new Date(user?.TokenExpirartion);
var now=new Date();
if (user && token_expiration>now) {
// check if route is restricted by role
if (route.data.roles && route.data.roles.indexOf(user.role) === -1) {
// role not authorised so redirect to home page
this.router.navigate(['/']);
return false;
}
// authorized so return true
return true;
}
// not logged in so redirect to login page with the return url
this.authenticationService.logout();
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
}
Even though I successfully login and store the user data in local storage, the authguard still returns null for the user. It only works after refreshing the page. The logout function also requires a page refresh to fully log out the user.
Below is an image showing the issue:
https://i.stack.imgur.com/dG82h.png
This is the code snippet for my login button:
this.AuthenticationService.login(this.username, this.password)
.pipe(first())
.subscribe({
next: () => {
// get return url from query parameters or default to home page
const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
this.router.navigateByUrl(returnUrl);
},
error: error => {
this.error = error;
this.submited = false;
}
});
Every time the authguard checks the userSubject after logging in, it returns null. The issue persists unless I refresh the page, which finally evaluates the userSubject correctly. Any suggestions on how to fix this problem are welcome!
After refreshing the page, the value looks like this: