Custom Page Permission using Angular 11

Question

I am working on an application in which I am implementing custom permission. There is subscription-based permission that I can't check in auth guard which will be static and I have implemented helper for permission which checks for route and then check it in user subscription for that route and then redirected to any of the pages on role permission. It is working fine but I need a better approach to implement it with clean code. Here is my implementation

Home Component

import { Component, OnInit } from "@angular/core";
import { Location } from '@angular/common';   
import { AuthService } from "src/app/services/apiServices/auth.service";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
  constructor(private readonly location: Location, private readonly authService : AuthService ) {
  }
  ngOnInit() {
    this.authService.getPermission(this.location.path());
  }
}

Auth Service Code

getPermission(currentRoute: string) {
    this.userPermissions = this.loggedInUserSubscriptionDetails$.subscribe(sub => {
      if (sub) {
        if (sub.MenuPermissioList.map(x => x.url).indexOf(currentRoute) === -1) {
          this.router.navigate(["/finance-analysis/not-authorized"]);
          return;
        }else{
          console.log('exists');
        }
      }
    });

  }

This code is basically getting a current location path and then checking that path in subscription MenuPermissioList if it exists then it allows to open up the page otherwise it redirected to unauthorized.

I don't want to use this code data : {roles: [ApplicationRolesEnum.CompanyAdmin]} because I have to add or remove roles from data to allow that user for a specific page and it is basically static binding. Here I have added this check and it is working fine but my permission may vary from user to user. Which makes it difficult to maintain.

     {
        path: "home",
        canActivate: [AuthGuard, SubscriptionGuard],data : {roles: [ApplicationRolesEnum.CompanyAdmin, ApplicationRolesEnum.ExternalUser]},
        loadChildren: () => import("src/app/pages/dashboard/dashboard.module").then(m => m.DashboardModule)
      },

Lukasz Gawrys · Accepted Answer · 2021-12-31T09:25:29.843

2

You could try following approach. I did not test it now and have written it off the top of my head but it is based on an approach I used in one project.

Basically you would still use a Guard for this but load the permissions from your service dynamically and based on them either let the user activate the page or redirect to the Unauthorized page. CanActivate subscribes to the Observable for you so you don't have to manage any subscription manually.

import { AuthService } from "src/app/services/apiServices/auth.service";


@Injectable()
export class SubscriptionGuard implements CanActivate {

  constructor(
    private readonly router: Router,
    private readonly authService: AuthService,
  ) { }

  canActivate(activatedRoute: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {
    return this.authService.loggedInUserSubscriptionDetails$.pipe(
      take(1),
      map((sub) => {
        if (!sub) {
          return false;
        }
        return sub.MenuPermissioList.map(x => x.url).includes(routerState.url);
      }),
      tap(hasPermission => hasPermission ? undefined : this.router.navigate(['/finance-analysis/not-authorized']))
    );
  }
}

Edit: changed the way of extracting current url after discussion in comments.

edited Dec 31 '21 at 09:25

answered Dec 30 '21 at 14:46

Lukasz Gawrys

1,234
2
8

Sorry doesn't help as the browser got stuck on canActivate and it ran unlimited time – Kamran Khan Dec 30 '21 at 15:41
If sub.MenuPermissionList.map return false then it run unlimited time and keep on running doesn't redirected to un-authorized page – Kamran Khan Dec 30 '21 at 15:50
Hm you could try use switchMap instead of tap as the last operator like this ```switchMap(hasPermission => hasPermission ? of(true) : from(this.router.navigate(['/finance-analysis/not-authorized'])))``` – Lukasz Gawrys Dec 30 '21 at 15:55
No luck with switchmap too. Basically the problem when it start return false then it keep on going – Kamran Khan Dec 30 '21 at 16:05
It's pity it doesn't work for you. If you would provide a working Stackblitz which reconstructs this problem I will look once more into it but for now it's hard to debug it blindly. – Lukasz Gawrys Dec 30 '21 at 16:14
You can try the last one ```map(hasPermission => hasPermission ? hasPermission : this.router.createUrlTree(['/finance-analysis/not-authorized']))``` – Lukasz Gawrys Dec 30 '21 at 16:23
Is there any other way with using map still the same – Kamran Khan Dec 30 '21 at 16:39
It worked thank you so much I have figure it out It was a little mistake I was making now going good. – Kamran Khan Dec 30 '21 at 17:45
Ok, cool! Did the version from answer work without changes or one of those from the comments? – Lukasz Gawrys Dec 30 '21 at 17:49
But I got one problem here in the URL I am getting **/calculator/interest-accrual** and it always return false – Kamran Khan Dec 30 '21 at 17:55
I am getting these links from the database – Kamran Khan Dec 30 '21 at 17:55
getPathFromRoot return this **//compliance** – Kamran Khan Dec 30 '21 at 17:57
Try to log out what do you get from getPathFromRoot and if it is the same like in the MenuPermissioList – Lukasz Gawrys Dec 30 '21 at 17:57
Like for the calculator I am getting **//calculator** – Kamran Khan Dec 30 '21 at 17:58
Take a look [here](https://stackoverflow.com/questions/50250361/how-to-elegantly-get-full-url-from-the-activatedroutesnapshot) if it helps – Lukasz Gawrys Dec 30 '21 at 18:01
I have done it using state.url it fetch me the whole URL... state: RouterStateSnapshot – Kamran Khan Dec 30 '21 at 18:06

Custom Page Permission using Angular 11

1 Answers1