2

I want to do something like this in my routing.module.ts (see lines marked by-->)

export const routes: Routes = [
        path: 'test/:action',
        component: CreateComponent,
        --> canActivate: ':action' == 'read' ? [Guard1] : [Guard1, Guard2],
        data: {
        -->  screenAction: ':action' == 'read' ? 'read' : ':action',
        }
]

I have to use the variable :action because it is used later in the router param. Thanks for your help !

Ben Saad
  • 21
  • 4

1 Answers1

1

Well, what you ask is possible but implementing it might be a little complex.

First of all, you need to define multiple routes instead of 1. Where you can apply the conditions you require.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: AppComponent },
  {
    path: 'dummy1/:action',
    component: Dummy1Component,
    canActivate: [GuardRotaterGuard],
  },
  {
    path: 'dummyx/:action',
    component: Dummy2Component,
    canActivate: [Guard1Guard],
  },
  {
    path: 'dummyz/:action',
    canActivate: [Guard1Guard, Guard2Guard],
    component: Dummy2Component,
  },
];

The route dummy1/:action is like a gateway route. Every request to dummy2 component should go from here. And then you need a decider/rotator guard that can decide and rotate the route depending on the route parameters. It should look like below :

canActivate(
    next: ActivatedRouteSnapshot,
    statex: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    const { action } = next.params;
    const state = { comesFrom: 'rotater' };
    console.log("rotater",action);
    if (action === 'read') { // you can decide whatever you want here
       this.router.navigate(['/dummyx/read'], { state });
    }else{
      this.router.navigate(['/dummyz', action], { state }); // pass the action to the other route as a parameter
    }

     return true;
  }

And here is a Stackblitz example in action.

Eldar
  • 9,781
  • 2
  • 10
  • 35
  • @elder Thanks for your response. Concerning the screenAction is it corresponding to the state you pass in the router.navigation() method ? – Ben Saad Oct 12 '21 at 14:23
  • @BenSaad dummy1 route never gets routed that's why you don't see dummy1 component. There was a long-going issue about using guards on a route without a component so I preferred this way. – Eldar Oct 12 '21 at 14:24
  • @BenSaad in router config data is used for static data you may not use dynamically. So if you want to pass dynamic data state or route parameters are the ways to go. If you provide some info about where and how you are going to use `screenAction` we could decide what you need to use. – Eldar Oct 12 '21 at 14:31
  • Thanks @Eldar once again ! But there is a problem. If it's read your redirect to dummyx/:action otherwise you redirect to dummyz/:action. So the path in the url is different if it is a read or an another action. I want the beginning of the path to be the same for all actions. (exemple dummyX/read and dummyX/write). – Ben Saad Oct 12 '21 at 14:39
  • @BenSaad in angular route configuration is static. So you can't change the rules at the run time by default. If you want that behavior you need to write a guard that looks like the rotator guard in here and it should do the checks which guard1 and guard2 do manually depending on the condition. There is one more possibility which is to use a library called [`aop-routing`](https://github.com/Dankwansere/aop-routing). It provides abilities to manipulate routes dynamically. [Article](https://javascript.plainenglish.io/dynamically-add-and-remove-canactivate-route-guards-in-angular-e7820ab4e061) – Eldar Oct 13 '21 at 17:18