angularroutesangular2-routingguard

Angular Route Metadata in Guards


Back in angularjs (using ui-router). You could add metadata to your routes and use those in routechanges.

In angular there are Guards for this, but I cannot seem to figure out how to get the metadata out of the route definition.

To give you a more concrete example, I would like to be able to add metadata to a route, let's say required roles and or permissions and have a guard do the heavy lifting.

Route definitions:

RouterModule.forChild([
    {
        path: '',
        component: MyComponent,
        data: {
            permissions: ["view"],
            roles: ["admin", "user"]
        }
    },
    ...
]);

And then in my Guard:

constructor(private myService: MyService, private router: Router) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    //How to get a hold of the data defined for the current route ?
    console.log(route.data); //returns an empty object
}

Solution

  • route.data[ 'permissions' ][ 0 ] should be the string view in the canActivate method of MyGuard. MyGuard should implement CanActivate. Your routing should look like this:

    {
        path: '',
        component: MyComponent,
        data: {
            permissions: ["view"],
            roles: ["admin", "user"]
        },
        canActivate: [ MyGuard ]
    }
    

    And this routing should work when accessing the root of the route. A detailed explanation can be found on the official angular site.