Applying Our Authorization UI Checks

In This Lesson

We'll use our access controls to apply authorization checks to the user interface of our application. This will ensure users don't see actionable items for operations they aren't allowed to perform.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 2 comments

@jals
1 year ago

Hi everyone, you can also add these css classes to `DropdownMenuContent` to manage `DropdownMenuSeparator`s automatically, '[&_[role=separator]+[role=separator]]:hidden [&_[role=separator]:first-child]:hidden [&_[role=separator]:last-child]:hidden'

1
1. Responding to jals
  
  @tomgobich
  1 year ago
  
  Thanks for sharing, jals!!
  
  0

Transcript

The last thing that we need to do here is add our authorization checks to what's actually displayed visually to the user inside of our application.
So for example, this user doesn't have the ability to edit or delete an organization. So they should not see the edit nor delete action here within the organization dropdown.
And then the exact same thing here inside of our organization settings. If we can't edit it, then we probably shouldn't see this entire card.
Likewise, if we can't remove users who aren't us, we should not see the remove button for users who aren't us specifically.
And then the exact same thing with the pending organization invitations down here. We should not see this form altogether nor the cancel invite button. So let's go into our text editor here and make those changes.
First, we can start with our organization select. So we'll dive into that component. Off the bat, it seems like we have a use form import that's not used, so we can go ahead and get rid of that.
We're gonna want to accept into our props, our can variable, which will come from our page or layout, depending on how we're making use of it.
So this will be of type abilities, which we're extracting out of our get abilities action.
And we can now scroll on down to those two dropdown menu items and wrap them in VIFs.
So for the edit, we can do VIF, can, organization, edit, so that this dropdown menu button only displays if the authenticated user has the ability to edit the organization.
The exact same thing here with our delete. VIF, can, organization, destroy.
Now, before we test this out, we need to actually go through and cascade this can variable down into our organization select component. So this is rendered by our navigation component.
So if we dive into our navigation component, we want to scroll up to the props here and into here, which will be of type abilities again.
Then our can prop from our navigation will automatically cascade through to our organization select props because we're binding all of our navigation props directly into our organization select.
So we're good to move on now to our app layout, which is rendering our navigation component.
So just going up another level here and our navigation components doing the exact same thing as our organization select, taking in all of the app layout props as its own props there.
So all we need to do is add our can of type abilities to our app layout props. And with that set, we're now good to go ahead and jump into our browser, open up our organization select.
And we can see that they are now hidden outside of here, but we do have an extra horizontal rule or separator going on there. So let's go ahead and dive back into our organization select.
And all right, we could have one before and one below.
So we just need to do a VIF can organization edit or an organization destroy to only show this additional separator if we have one of these two actions available to our user.
So save that, jump back into here. And now that extra rule is gone.
All right, next, let's go ahead and hide our update organization card, which if we bring out our Explorer, scroll on down, we should be able to do this directly inside of our settings organization page.
Just hide the card altogether.
So since this is a page, we can take our can abilities directly in here, and then just wrap the edit card altogether in a VIF can organization edit.
Give that a save, jump back into our browser, give that a refresh.
And there we go, that card is now altogether gone, which now leaves us with our remove buttons for our users and invitations. So let's dive back into our text editor.
Before we dive into either one of those components though, we first wanna cascade our can through to them so that they have them to work with.
So we'll add our can onto the props there, as well as for our users invite.
And then we can go ahead and dive into our user card for our organization, and let's add that into our props. So go and drop these down into new lines.
All right, and let's add in our can type abilities, and then scroll on down because it is the remove button that we want to hide if the user does not have the ability to remove the current member that we're looping over here.
So similar to how we're tacking that U on right there, we want to be if can organization manage users or member.id equals user.id.
So if the authenticated user has the ability to manage users, then they can go ahead and delete whoever they want.
Otherwise, if they are the current user that we're looping over, then we'll allow them to remove themselves.
So with that, we should be able to save this, jump back into our browser, and of our three organization members, we should only see the remove button on ourselves, which is what we're seeing exactly.
And then for our pending organization invites, we just want to hide it based off of the user's ability to manage users.
So user invite card, right where we have the cancel invites, we first want to jump up to our props, grab our can of type abilities, scroll back down, and let's tack on a VIF can organization manage users.
And that's all that we want to do here. So we'll give that a save, jump back into our browser. And now that is gone altogether.
If you wanted to, you could wrap the entire table cell here in that instead.
So let's move that VIF actually up to the table cell and add it onto the table head there too, to just remove that column altogether if the user does not have that ability.
So with that set, a minuscule difference, but just things are taking up a little bit more width here between our email and role columns.
And then lastly, we want to hide this invite form if the user does not have the ability to manage users. So we have our entire div right here.
We'll just wrap that in the same VIF can organization manage users, give that a save, jump back into our browser, and there we go.
Now we have a simplified pending organization invitations for our member user. And then we can go ahead and jump back over into our administrator.
So testuser1@test.com, type in our password, jump back over into our organization settings where we still see the update organization, where we can still edit it, update it, just get rid of that again, and remove any user that we want, cancel any pending invitations, as well as invite new members.
And then we can check out our organization selects, and we still have the ability to edit here and delete there as well.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.