{"id":71804,"date":"2020-01-10T16:54:20","date_gmt":"2020-01-10T11:24:20","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71804"},"modified":"2024-04-12T14:22:43","modified_gmt":"2024-04-12T08:52:43","slug":"route-protection","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/route-protection\/","title":{"rendered":"Route Protection"},"content":{"rendered":"\n

Go back to Tutorial<\/a><\/p>\n\n\n

Securing routes with the new component router is one of these and it can be difficult to figure out. Here\u2019s the approach I\u2019m using which seems to be working well for me and has been reusable across multiple projects.<\/p>\n

First of all, this is for declarative security only. That is, where the rules can be statically defined on the route. It should be adaptable to work with whatever authentication system your app uses but is particularly suited to using JSON Web Tokens which can contain the roles that your user has been granted.<\/p>\n

If you need per-object permission checks, doing these within the component and \/ or service that is responsible for accessing and handling them.<\/p>\n

The natural place to declare the permissions for a route is on the route config which provides a data property. While we could add a flag to indicate if a route should be public or not, it seems a little superfluous as routes are public by default and so the flag would only ever add new information if set to false. As we\u2019re also going to define roles that the user requires we can make that do double-duty and use it\u2019s presence to indicate that we need authentication but it can be empty if we don\u2019t care about any specific roles which is the same as saying we only care that the user is authenticated.<\/p>\n

Here\u2019s an example of three routes, the first one is open to all, the second one only available to authenticated users (but no roles specified) and the last one requiring the user has the role \u2018admin\u2019.<\/p>\n

@RouteConfig([<\/p>\n

{ path:’\/open2all’, component:OpenComponent, name:’Open’ }<\/p>\n

{ path:’\/needauth’, component:AuthComponent, name:’Auth’, data:{ roles:[] }}<\/p>\n

{ path:’\/needrole’, component:RoleComponent, name:’Role’, data:{ roles:[‘admin’] }}<\/p>\n

])<\/p>\n

So that\u2019s the permissions for our routes defined – the easy part! We want to be able to check these permissions as part of the routing process and the natural place to do this is the <router-outlet> so we are going to create our own <secure-outlet> version that will override the activate method to do the permission checks. But what if permission fails? What do we want to happen? There are two scenarios:<\/p>\n