Combine a pair of select statements to utilize the RxJS store within an Angular Guard

Question

Combine a pair of select statements to utilize the RxJS store within an Angular Guard

When working on an Angular Guard, I encountered a challenge where I needed to select two fields from the ngrx store. Here is the code snippet for reference:

@Injectable()
export class RoleGuard implements CanActivate {

  constructor(
    public router: ActivatedRouteSnapshot,
    private store: Store<AppState> ) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

    const expectedRole = route.data.Role;

    return combineLatest(
        this.store.pipe(select(isLoggedIn)),
        this.store.pipe(select(currentUser)),
      ).pipe(
          tap( ([loggedIn, user]) => 
                {
                    if ( loggedIn && !(user.role.find(expectedRole) >= 0) ) {
                        this.router.navigateByUrl('/error/403')
                    };
                }
            )
        );


  }

}

Despite my efforts, I encountered the error

Type 'boolean | [any, any]' is not assignable to type 'boolean'

, which is due to the combineLatest returning the result in an array format. I'm seeking a more elegant solution than using combineLatest and avoiding nesting the select observables. Are there any suggestions for better alternatives?

javascript angular typescript rxjs ngrx

Answer 1

Answer №1

The canActivate method is expected to return a boolean within an Observable. Originally, your code returns values wrapped in an Observable from the combineLatest method, which results in an array being returned. To address this, you can utilize the map operator to easily return either true or false.

@Injectable()
export class RoleGuard implements CanActivate {
  constructor(
    public router: ActivatedRouteSnapshot,
    private store: Store<AppState> ) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

    const expectedRole = route.data.Role;

    return combineLatest(
        this.store.pipe(select(isLoggedIn)),
        this.store.pipe(select(currentUser)),
      ).pipe(
          map( ([loggedIn, user]) => 
                {
                    if ( loggedIn && !(user.role.find(expectedRole) >= 0) ) {
                      this.router.navigateByUrl('/error/403')
                      //In case you wish for the guard to fail and redirect to the 403 page, then return false
                      return false;
                    };

                  //If the above condition fails and you want to pass the guard, then return true; essentially, adjust the return based on your requirements.
                  return true;

                }
            )
);
  }

}

I trust this provides some clarity.

Answer 2

The canActivate method is expected to return a boolean within an Observable. Originally, your code returns values wrapped in an Observable from the combineLatest method, which results in an array being returned. To address this, you can utilize the map operator to easily return either true or false.

@Injectable()
export class RoleGuard implements CanActivate {
  constructor(
    public router: ActivatedRouteSnapshot,
    private store: Store<AppState> ) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

    const expectedRole = route.data.Role;

    return combineLatest(
        this.store.pipe(select(isLoggedIn)),
        this.store.pipe(select(currentUser)),
      ).pipe(
          map( ([loggedIn, user]) => 
                {
                    if ( loggedIn && !(user.role.find(expectedRole) >= 0) ) {
                      this.router.navigateByUrl('/error/403')
                      //In case you wish for the guard to fail and redirect to the 403 page, then return false
                      return false;
                    };

                  //If the above condition fails and you want to pass the guard, then return true; essentially, adjust the return based on your requirements.
                  return true;

                }
            )
);
  }

}

I trust this provides some clarity.

Answer 3

Answer №2

If you're looking to combine observables, you have a couple of options:

forkJoin([
        this.store.pipe(select(isLoggedIn)),
        this.store.pipe(select(currentUser)),
      ])

Alternatively, you can use the merge operator:

The merge operator creates an output Observable that concurrently emits all values from every given input Observable.

import { merge, interval } from 'rxjs';
import { take } from 'rxjs/operators';

const timer1 = interval(1000).pipe(take(10));
const timer2 = interval(2000).pipe(take(6));
const timer3 = interval(500).pipe(take(10));
const concurrent = 2; // The argument for concurrency
const merged = merge(timer1, timer2, timer3, concurrent);
merged.subscribe(x => console.log(x));

Answer 4

If you're looking to combine observables, you have a couple of options:

forkJoin([
        this.store.pipe(select(isLoggedIn)),
        this.store.pipe(select(currentUser)),
      ])

Alternatively, you can use the merge operator:

The merge operator creates an output Observable that concurrently emits all values from every given input Observable.

import { merge, interval } from 'rxjs';
import { take } from 'rxjs/operators';

const timer1 = interval(1000).pipe(take(10));
const timer2 = interval(2000).pipe(take(6));
const timer3 = interval(500).pipe(take(10));
const concurrent = 2; // The argument for concurrency
const merged = merge(timer1, timer2, timer3, concurrent);
merged.subscribe(x => console.log(x));

Answer 5

Answer №3

When working with independent services and only interested in the final emitted value of each observable, forkJoin can be a useful tool. However, if one service's response is needed by another service, the code snippet below demonstrates how to handle this scenario.

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

return this.store.pipe(select(isLoggedIn)).pipe(switchMap(loggedIn)=>{
     return _checkLoggedIn(loggedIn);
   }),
   catchError(() => {
      return of(false);
    }));
}


private _checkLoggedIn(loggedIn): Observable<boolean> {
  if(loggedIn){
    return of(true);
  } else {
    return this.store.pipe(select(currentUser)).pipe(map((currentUser)=>{
      return currentUser;
    }));
  }
}

Answer 6

When working with independent services and only interested in the final emitted value of each observable, forkJoin can be a useful tool. However, if one service's response is needed by another service, the code snippet below demonstrates how to handle this scenario.

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

return this.store.pipe(select(isLoggedIn)).pipe(switchMap(loggedIn)=>{
     return _checkLoggedIn(loggedIn);
   }),
   catchError(() => {
      return of(false);
    }));
}


private _checkLoggedIn(loggedIn): Observable<boolean> {
  if(loggedIn){
    return of(true);
  } else {
    return this.store.pipe(select(currentUser)).pipe(map((currentUser)=>{
      return currentUser;
    }));
  }
}

Combine a pair of select statements to utilize the RxJS store within an Angular Guard

Answer №1

Answer №2

Answer №3

Similar questions

Angular Redirect Function: An Overview

Moving DOM Elements around

Establish the directive upon receiving the broadcast

I am looking to utilize the JavaScript YouTube API to seamlessly upload a video from my website directly to YouTube

The constructor error in ng-serve signalizes an issue in

AngularJS not displaying loader during AJAX request

Leveraging the power of the three.js library on the client-side within a vue.js/n

Refresh a dynamically loaded webpage following an update

Troubleshooting: AngularJS ng-repeat not rendering JSON data

Display custom modals in React that showcase content for a brief moment before the page refreshes

Guide on triggering a modal upon receiving a function response in React

Unable to retrieve a substring value in Angular using Typescript

Issue: friends.js file contains an unexpected token "<" error after implementing express.static and modifying HTML content upon button click

Achieving camera zoom in threeJS without the use of trackball controls or any other camera control libraries

convert JSON to Java object using GSON with a map

I keep getting redirected to a blank page by JS

Incorporating a new data series into your candlestick chart with Highstock

Storing AngularJS route components in the cache for optimal performance (keep-alive)

Attention: It is not possible to update the React state on a component that is not mounted. Please use the useEffect cleanup function

Problem with JavaScript and Basic HTML5 Canvas