Implementing Typescript Angular CanActivate Guard

Question

Implementing Typescript Angular CanActivate Guard

Having some difficulties with the guard on my route that has multiple conditions and too many lines of code. Is there a way to make it shorter?

export class GuardService implements CanActivate {
  constructor(private router: Router, private apiService: InfoService) { }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
    const { id, type } = route.params;

    if (Object.keys(CustomerType).includes(type)) {
      return this.apiService.get(id).pipe(
        map((overview) => {
          if (type === 'additional' && overview.main === null) {
            return this.navigate([etc]);
          }
          return true;
        }),
        catchError(() => false)
      );
    } else {
      return false;
    }
  }
}

Facing challenges with numerous conditions in the guard code and seeking suggestions on how to simplify it. Any help would be greatly appreciated!

angular typescript

Answer 1

Answer №1

To improve readability and performance, consider reversing the first condition and combining it with the second one within the map function in your GuardService class:

export class GuardService implements CanActivate {
    constructor(private router: Router, private apiService: InfoService) { }
  
    canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
      const { id, type } = route.params;
  
      if (!Object.keys(CustomerType).includes(type)) {
        return false;
      }

      return this.apiService.get(id).pipe(
        map((overview) => {
          if (type === 'additional' && overview.main === null) {
              return this.navigate([etc])
            }
            return true;
        }),
        catchError(() => false)
      );
    }
}

Answer 2

To improve readability and performance, consider reversing the first condition and combining it with the second one within the map function in your GuardService class:

export class GuardService implements CanActivate {
    constructor(private router: Router, private apiService: InfoService) { }
  
    canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
      const { id, type } = route.params;
  
      if (!Object.keys(CustomerType).includes(type)) {
        return false;
      }

      return this.apiService.get(id).pipe(
        map((overview) => {
          if (type === 'additional' && overview.main === null) {
              return this.navigate([etc])
            }
            return true;
        }),
        catchError(() => false)
      );
    }
}

Answer 3

Answer №2

If you want to make it a bit shorter without making a big difference

canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
    const { id, type } = route.params;

    if (!Object.keys(CustomerType).includes(type)) {
      return false;
    }

    return this.apiService.get(id).pipe(
        map((overview) => {
          if (type === 'additional' && overview.main === null) {
              return this.navigate([etc])
          }
          return true;
        }),
        catchError(() => false)
    );
}

Answer 4

If you want to make it a bit shorter without making a big difference

canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
    const { id, type } = route.params;

    if (!Object.keys(CustomerType).includes(type)) {
      return false;
    }

    return this.apiService.get(id).pipe(
        map((overview) => {
          if (type === 'additional' && overview.main === null) {
              return this.navigate([etc])
          }
          return true;
        }),
        catchError(() => false)
    );
}

Implementing Typescript Angular CanActivate Guard

Answer №1

Answer №2

Similar questions

Transitioning from Angular 4 to 5: "Encountered NodeInvocationException: PlatformRef provider not found!"

Tips for resolving conflicts between sequelize and angular within a lerna monorepo using typescript

Table with a responsive c3 chart

The origin of the setTimeout() with an extensive delay of 99999000 cannot be located - zone.js macrotask in Angular revision 17

Extracting types from a union of Boxes in Typescript

Using a static value in the comparator is necessary for Array.find to function properly in Typescript

Angular Universal API/http-request encounters "404 not found" error within Docker Image

Tips for instructing kysely key-gen to utilize basic data types for mapping database tables

Checking for changes in Angular text area using pipes is a common task. To do this,

Merging the Outcomes of Observables to Create a Unified Array

Displaying search results in various Angular components

Encountering Angular 2 RC5 Routing Problem when Loading Several Modules

How to retrieve the type of a computed keyof T as a generic type within TypeScript

Invoke a function upon subscription in Angular

Guide to integrating Gandi.Net API with Node.js in server.js

Seeking a guide on how to effectively utilize Angular 6 for consuming REST API and performing CRUD operations

Is it possible to begin utilizing Angular 2 without requiring Node?

Enroll in various Observers simultaneously using a loop in Angular

Find out the quantity of enum elements in TypeScript

Is your Typescript compilation running into a problem with jwt tokens?