Angular 4 canActivate with nested observables not working

Question

First off sorry for the title, I had no idea what to call this.

I am working on a project that requires an authentication guard which I originally had working great. Bascially all it did was check to see if there was a valid token in local storage. Pretty simple.

Well as most Apps do, it got a little more complicated in the form of needing to set a "Reset Password" flag on the users profile which would force them to reset their password on the next login. That's where the guard stopped working as expected. I think that the return Observable.of(true) isn't quite making up the chain, because when the guard runs the console logs PASSWORD RESET, PROCEED , but fails to allow the user to continue. I am not well versed enough with RxJs to know what needs to be done. Also I apologize in advance for the observable pyramid of doom. Refactoring that is something on the "would be nice to do" list.

@Injectable()

export class AuthenticationGuard implements CanActivate {

constructor(
    private _Router: Router,
    private _LocalUserService: LocalUserService,
    private _SystemSettingsService: SystemSettingsService,
    private _UsersService: UsersService
) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {

    return this._SystemSettingsService.getSystemSetting('AUTHENTICATION')
        .map(_SystemSetting => {

            // Check for Authentication to be Enabled
            if (_SystemSetting.data.settingValue.enabled) {

                // Check for an Authentication Token Locally
                this._LocalUserService.getLocalUserObject()
                    .subscribe(_LocalUserObject => {

                        // Check if Local User Object is Empty and if a Token is Present
                        if (_LocalUserObject && _LocalUserObject.token) {

                            // Retrieve the user that the token is associated to from API
                            this._UsersService.getUser(_LocalUserObject.userID)
                                .subscribe(_User => {

                                    // If password reset is enabled, force user to reset their password.
                                    if (_User.data.userPasswordReset) {
                                        this._Router.navigate(['/gateway/password-reset']);
                                        return Observable.of(false);

                                        // If password reset is false, allow the user to proceed.
                                    } else {
                                        console.log('PASSWORD RESET, PROCEED');
                                        return Observable.of(true);
                                    }
                                })

                            // If Local User Object is invalid, navigate to Login Page.
                        } else {
                            // not logged in so redirect to login page with the return url
                            this._Router.navigate(['/gateway/login'], { queryParams: { returnUrl: state.url } });
                            return Observable.of(false);
                        }
                    })

                // If Athentication is disabled allow the user to bypass authentication
            } else {
                return Observable.of(true);
            }
        })
    }
}

Any suggestions would be much appreciated... Thanks

Answer 1

I ended up figuring it out. I started by consolidating most of the observables into a single call. I still have one nested observable. But I also found out that you have to mindful of your return type. Within the switchMap I am returning Observables, however within the nested map operation it switches to boolean.

 @Injectable() export class AuthenticationGuard implements OnInit, CanActivate { systemSetting$: Observable<any> = this._SystemSettingsService.getSystemSetting('AUTHENTICATION'); localUserObject$: Observable<LocalUserObject> = this._LocalUserService.getLocalUserObject(); initialData = Observable.zip( this.systemSetting$, this.localUserObject$ ); constructor( private _Router: Router, private _LocalUserService: LocalUserService, private _SystemSettingsService: SystemSettingsService, private _UsersService: UsersService ) { } ngOnInit() { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { return this.initialData.switchMap(_Result => { // Check for Authentication to be Enabled if (_Result[0].data.settingValue.enabled) { // Check if Local User Object is Empty and if a Token is Present if (_Result[1] && _Result[1].token) { return this._UsersService.getUser(_Result[1].userID) .map(_User => { // If password reset is enabled, force user to reset their password. if (_User.data.userPasswordReset) { this._Router.navigate(['/gateway/password-reset']); return false; // If password reset is false, allow the user to proceed. } else { console.log('PASSWORD RESET, PROCEED'); return true; } }) // If Local User Object is invalid, navigate to Login Page. } else { // not logged in so redirect to login page with the return url this._Router.navigate(['/gateway/login'], { queryParams: { returnUrl: state.url } }); return Observable.of(false); } // If Authentication is disabled allow the user to bypass authentication } else { return Observable.of(true); } }) } }