Lock/deny url from users (angular guard)

Question

I would like to block url access from unauthorized users. I'm currently using canActivate with route Guard from angular for blocking no Admin user to access /admin route (that's works OK).

But now, I have an other use case that is a bit complex: I wanna block some users (not listed in a list on my database) from accessing the ressource by typing the matching URL (like: mydomain/designForm/123ytfdhs653HG). To do that, first of all, I already block the access from my user view (OK) but the unauthorized users can still access the ressrouce (page) by typing a correct URL directly (the subject).

My app-routing.module.ts

{
      path: 'designForm/:id',
      loadChildren: () => import('app/homeUser/formulairesAccess/designForm/designForm.module').then(x => x.DesignFormModule),
      resolve: { dataSolution: SolutionResolver, dataDesignForm: FormulaireDaResolver },
      canActivate: [AccessFormsGuard]
    },

My access-form.guard.ts

export class AccessFormsGuard2 implements CanActivate {
  constructor(private formAllServ: FormulaireAllService, private router: Router, private toastr: ToastrService) {}
  
  //CHECK l'accès aux formulaires
  canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean | Promise<boolean> {
        var isAuthorized = this.formAllServ.isAuthorizedToAccessFormsGuard();
        if (isAuthorized === false) {
          console.error("Access DENIED, user doesn't have access to these forms");
          this.router.navigate(['/homeUser']);
        } else {
          console.log("Access AUTHORIZED !")
        }
        return isAuthorized;
    }
}

In order to check if the user is authorized, I need to get an id of URL (The user entered the URL directly, I just want to cover that case) for exemple: mydomain/designForm/MY_ID_TO_GETBACK

My formulaireAll.service.ts

public isAuthorizedToAccessFormsGuard2(): boolean {
console.log("URL",this.router.url); //return -> "/"
console.log("ROUTE",this.route.snapshot.toString()); //return -> Route(url:'', path:'')
//Make my database request with my id getted back from the URL
//
//
var isFound = false;
return isFound
}

The trouble is that I can't get the URL (/mydomain/designForm/MY_ID_TO_GETBACK) when the user type on the browser url bar... As I understand, it seems the guard is trigerred only before accessing the url (the logical behavior of guard), that's why I have like a result "/" URL typed.

How can I get the entered URL in the guard or in my service ?

Have you checked `state.url` instead of `router.url`? The router hasn't updated to the target URL yet (because the route hasn't been resolved yet), but the state snapshot should have (because the router needs information about the target in order to resolve the route). — D M, Apr 03 '23 at 13:54
I found a workaround linked here: https://stackoverflow.com/questions/49800298/custom-guard-get-id-route-params — Dorian, Apr 03 '23 at 14:02

Dorian · Answer 1 · 2023-04-04T15:06:20.070

0

I found a workaround for those who are interested: My access-form.guard.ts:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | Promise<boolean> {
    const myId = route.paramMap.get('id') //get ID from URL
    var isAuthorized = this.formAllServ.isAuthorizedToAccessFormsGuard(myId);

    if (isAuthorized === false) {
      console.error("Access DENIED, user doesn't have access to these forms");
      this.router.navigate(['/homeUser']);
    } else {
      console.log("Access AUTHORIZED")
    }
    return isAuthorized
}

edited Apr 04 '23 at 15:06

answered Apr 03 '23 at 14:51

Dorian

17
8

https://stackoverflow.com/questions/59335950/delay-the-route-canactivate-method-call-till-backend-service-return-result-in-an related but not a good answer – Dorian Apr 03 '23 at 15:08

Lock/deny url from users (angular guard)

1 Answers1