Applying RBAC to the UI

[00:00:00]
>> Kyle Cook: Now all we need to do is go through and update essentially our UI to use these as well, and this is where I think the big power comes in, essentially a centralized system like this, because now instead of having a bunch of checks everywhere that are if statements, if we just find a location here, for example, is a giant if statement, now we can replace this with a single can function, and when we update our permissions in that role-based access control file, it propagates to every single part of our application.

[00:00:24]
So here, we can just say can, pass it in our user, in our case this is for a new document, so we can say document create. And now all we need to do is just go through all the rest of our different files and look at what the permission we're trying to check is. So we've finished this entire page, let's move on to the next page, and this page, if I open it up properly here, is the page for the document view, so we can scroll down.

[00:00:45]
Here's a permission for editing, and since we're on the document details, this is for editing a document, so we can replace this with a simple can call. Pass it in the user, and in our case, that's just documents update, just like that, and of course we'll want to import this function. There we go, that permission is done. Let's move on down and see here we have the delete button, so let's just do a permission for delete as well.

[00:01:13]
There we go. And again, the nice thing about this is it's super easy to read what's going on. You don't actually need to dive into the if statements or anything, you can just read this can function and it'll tell you what's happening inside your code. So that cleans up all of our permissions in that file. Let's move on to our next particular file here. Inside of this one we're on the edit document page, determining if the user has access to edit that document.

[00:01:32]
So again, we can replace this with a single can call inside of our code. Let's import the function, pass it in the user, and the role in our case is a document update since we're on the edit page, and if they cannot do that, then we're going to redirect them back to the login page or wherever else you think is appropriate. That page is entirely done, we can move on to the next page, this page is for handling creating brand new documents, so we can come into here and do the exact same thing.

[00:01:59]
Get that can function, we want to check that the user document to create, and of course if they cannot do that, then we're going to redirect them some other location, throw an error, whatever it is you want to handle, just put that code right here, it's entirely up to you. So that page is done. Next page that we're going to be moving on to here is the edit project page, so again, we have our permission check right here, and we can just replace that with a can edit section.

[00:02:22]
So let's make sure we negate that. If the user cannot edit a project, which is project update just like that, then we're going to redirect them back to the login page, and it looks like we have an error down here, and that's because we can change this permission as well. This is deleting a project, so we can say can, user, and this is going to be project delete, just like that. That's finished up this page entirely, so we're almost through all of our different permission checks.

[00:02:46]
This next page is for creating a new project, so again, pretty much what we've done throughout all this section, we can say user and project create and make sure we negate that. So if they cannot create projects, redirect them. And then finally I think we're onto almost our very last one here. This permission is for a new project button. This is like our sidebar on our application, so what we can do for this one is we can just say can, user, project create and make sure we import that function, and there we go, we have all of that completely done and let's just make sure we have no more checks inside of here.

[00:03:21]
So it looks like instead of our queries, we have this check right here, get all projects, that one we don't have to worry about, that one's already done, and actually there should be no permissions inside here. I don't know why this is here, this must have just been left over from before, because we know our data access layer should no longer have any authorization in it, so this should actually be completely removed from this authorization section, and let's check here, yeah, that is removed.

[00:03:41]
So there we go, that's actually just cleaning up some old code from before. And then otherwise, yes, it's just the services which we have already completely handled, and actually it looks like our project service we have not done yet, so let me make sure we do this one. Can user, and this one is project create, so let's just negate that at the start there, and let's copy this down to all the rest of them.

[00:04:15]
So we have update, there we go, and again, copy that over, so it's just easy to work with, we'll go into delete. So we can replace this off check with a delete check. Replace this check right here, which this one we already have in our where clause, we don't need to worry about that, and then here, this one has already been replaced with our can read project. So that should handle all of our different permission checks, let me just double check our documents to make sure we're using our can function inside of all of these, and it looks like we are.

[00:04:42]
Yep. So now we've essentially transformed all of our permissions so they all flow through the exact same file, this role-based access control file, and if we change this file, we can change what everyone in our application has access to immediately. So let me show you what that looks like. We'll go into our actual demo, let's just log out and we're going to log into an author. So the author has access to create new documents, so you can see when we click on this page, we get brought to new document, no problem.

[00:05:04]
That I would say I don't want authors to create new documents. Well, all I need to do is come to one single location where that author permission is, remove that permission, and now my entire application automatically updates. That new document button has been completely removed. If I try to manually go to that page again, it's going to redirect me away from that page because I don't have access to that.

[00:05:23]
And if I were to somehow send a request to my server, that's also going to be denied because everything runs through the exact same permission system. So this is really nice because it's easy to update permissions, and if I want to add a new permission, I just add it into this file, and it's super simple. I want to add a new role, well, all I have to do is add the role in this file, and all of the rest of my code handles all that for me automatically.

[00:05:43]
So we've essentially centralized our permissions much more than they were before. Still not perfect, but it's much better.