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 ?

Answer 1

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
}