Angular guard true/false depending on permission

Question

I have 4 routes where each one will have a permission linked to it (provided by the backend -> true/false). These permissions give a logged-in user the authorization to access particular routes.

Now my question is if it is possible to make only one guard which checks all of the linked permissions, but only blocks the particular route where the linked permission is 'false'?

Example (4 features, with 4 permissions):

permissions: {
  permission_1": false, // matches /post/create
  permission_2": false, // matches /admin/post
  permission_3": false, // matches /admin/delete
  permission_4": true, // matches /subscribe
}

The guard checks only the matching permission for the particular route. In other words, the user will only have access to the "/subscribe" route and not for the other three.

Yes there is a way. First add `data: { permission: p }` in your routes and then create one Gaurd that checks the route data permission in the user session permission list and give true false accordingly. You can use ActivatedRoute class for this. — Beshambher Chaukhwan, Jun 14 '21 at 17:33

score 1 · Answer 1 · answered Jun 14 '21 at 17:44

Yes, you can do this with one Guard. You can use CanActivate or CanActivateChild as needed.

// Angular imports
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  UrlTree,
  Router,
} from "@angular/router";

@Injectable({
  providedIn: "root",
})

export class PermGuard implements CanActivate, OnDestroy {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
      const url: string = state.url;
      return this.checkPerms(url);
    }

  checkPerms(url: string): | Observable<boolean | UrlTree>| Promise<boolean | UrlTree> | boolean | UrlTree {
    // Check for Perms compared to URL that the app is routing to here.
    if (url.includes("create") {
      //check for perms for "create" url here...
    }
  }

score 1 · Answer 2 · answered Jun 14 '21 at 18:03

First you need to create an HTTP request, which gets json with the url and its value, like this.

 {
   home: true,
   rotue1:false
 }

Create a service that implements the canActivate interface

@Injectable({
    providedIn: 'root'
})
export class EnabledUrlService implements CanActivate {

    constructor(private router: Router) {
    }

     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.authService.getPermissions()
            .pipe(map((resoruce: any) => resource[route.data?.id])
     }
}

And include this service in the routing file

        {
            path: 'rotue1',
            component: RouteComponent,
            canActivate: [EnabledUrlService]
        },
        {
            path: 'home',
            component: HomeComponent,
            canActivate: [EnabledUrlService]
        }

I hope help you, if have any questions, let me know

Angular guard true/false depending on permission

2 Answers2