Role-based access control:

Role-based access control means restricting users to access different parts of the application based on their roles. Let's say, you are making an application for a bank. Now, you can have a dashboard where different kinds of employees see different kinds of stat or other operational buttons and you don't want to show all buttons or statistics to all users. Like, a manager can see all the transaction history of the tellers. But, a teller can't see the transactions of all tellers. So, you will have to control that access via your application. And, that is called Role-based access control.

Here, The left dashboard is for the manager where he can see the teller stats. And, the dashboard on the right side is for a teller who can't see the other tellers' stat. This is called RBAC.

Restrict users based on Role or Right:

Currently, I am building a learning management system for a client. For this application, we have three kinds of users like Mentors, Students, and Admin. We are implementing RBAC based on specific rights, not roles. The users have different rights to access different parts of the application. For example, only a user with the 'ASSIGN_COURSE' right can assign a course to a student.

As there are specific rights for a specific user so every user can't go to every route of the application. Let's say there is a page where all the students will be shown and we want that only users with 'VIEW_STUDENTS' right can go to that route.

So, we need a route guard here. How can we implement that?

It's simple. I am passing the right name as data on the route and then checking that right on the route guard.

const routes: Routes = [
  {
    path: ':id', component: StudentsComponent, 
    data: { right: 'VIEW_STUDENTS' }, 
    canActivate: [RightRouteGuardService]
  }
];

And, in the route guard, I am checking if that right is on the list of existing rights. If it is there then I am sending true from canActivate, otherwise false. **When the user logs in, the backend sends me a list of rights of that user which I am saving in local storage. **

canActivate(route: ActivatedRouteSnapshot): boolean {
    let right = route.data.right;
    const rights = JSON.parse(localStorage.getItem('rights'));
    if (rights.includes(right)) {
      return true;
    } else {
      return false;
    }
  }

I was getting trouble implementing this feature in my application. And, after asking this question on StackOverflow, I got the right path to implement it! Check the question if you want: stackoverflow.com/q/67093988/9695503

Thanks for reading! Let me know if you have any questions or suggestions.

☕ If you like the article, you can Buy me a coffee