I designed a custom login service using the AuthGuard feature in Angular. My implementation involves utilizing a SessionService that offers methods like login() and onUserLoggedIn(), which essentially returns a BehaviorSubject containing the current user status (logged in/not logged in). To enhance this service, I developed an implementation of AuthGuard implements CanActivate service. In this implementation, I invoke the onUserLoggedIn method to verify the value in the subject at that moment. A challenge arises where the value changes in the login method after the AuthGuard calls onUserLoggedIn. Consequently, during the initial attempt, I receive a false value from the BehaviorSubject; however, upon retrying, I get the true value.
How can I modify the implementation of these services to achieve the correct value on the first try?
AuthGuard:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
: Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
console.log('auth');
return this.sessionService.onUserLoggedIn()
.pipe(
map(res => {
console.log('res', res);
return res;
}),
take(1),
tap(allowed => {
console.log(allowed);
if (!allowed) {
this.router.navigate(['/login']);
}
})
);
}
SessionService:
private isLoggedIn = new BehaviorSubject(false);
constructor(private apiService: ApiService) {
}
login(user: User): Observable<any> {
console.log('hello before');
return this.apiService.post(`${BASE_URL}/login`, user)
.pipe(
tap((token: Token) => {
this.isLoggedIn.next(true);
localStorage.setItem('token', token.token);
console.log('hello');
})
);
}
onUserLoggedIn() {
return this.isLoggedIn;
}
The log outputs for the first attempt are as follows:
- SessionService.ts:19 hello before
- AuthGuard.ts:17 auth
- AuthGuard.ts:22 res false
- AuthGuard.ts:27 false
- SessionService.ts:25 hello
For the second attempt (which ideally should have been the initial one):
- SessionService.ts:19 hello before
- AuthGuard.ts:17 auth
- AuthGuard.ts:22 res true
- AuthGuard.ts:27 true
- SessionService.ts:25 hello