تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Inject Logged-in User ID0:00

Okay, let's take a look at authorization. So now that we have authentication in place, we want to make sure that our logged-in users have the correct permissions to perform certain actions. For example, we want to make sure that only the User who created the Post can update or delete it. Let's start with creating Post. If we go to GraphQL Playground, we'll see that we have this mutation here to create a Post, but we were just hard-coding the userId here. What we actually want is have this automatically populated on the server with the logged-in User's ID.

What we actually want is have this automatically populated on the server with the logged-in user's ID. So let's go ahead and do that. So we can make use of the inject directive in Lighthouse to do that. And there's an example right here, which is pretty much the same use case as us for creating a Post. We want to inject the user ID, and this will be the ID of the logged-in user, and we want to inject it into this column here. So let's grab this, and let's try this out. So back to our code.

So let's grab this, and let's try this out. So back to our code. Let's also put this behind a card, so we have to be logged in. Let's paste that in. And we no longer need a userId, since it will come from the logged-in user. So let's remove this, save that. Let's go back here to GraphQL Playground. Let's remove the userId, and let's try that out again. Now we get unauthenticated because we are not logged in. So let's comment this out.

Now we get unauthenticated because we are not logged in. So let's comment this out. Let's comment this back in, which allows us to log in. So we can grab a token here. Okay, let's grab this token. So now I'm going to be logged in as this User. Let's paste this token in here. Let's comment this out again. And let's run this createPost again. Let's rename this to, this is Andre's post.

And let's run this create Post again. Let's rename this to, this is Andre's post. Okay, let's run that. And now it does work. Now if you take a look at the database, let me just refresh this. We get this is Andre's post and userID 51 is Andre. So it is working correctly. Now in our actual app, let's go ahead and accommodate for that as well. So all we have to do is remove the userID. So back to our front end, should be in create.view.

So all we have to do is remove the userId. So back to our front end, should be in create.view. We don't need the userId anymore, so let's remove this. Let's remove it from here as well. Let's remove it from the variables. And that should be it. So save that. And I believe I'm not logged in, so I'm going to log in as another User. So this User here, person@person.com. Okay, and let's go ahead and create the Post

Authorize Update and Delete2:35

So this User here, person at person.com. Okay, and let's go ahead and create the Post and see if the user_id is correctly populated. Say person's post, body here. Let's try this out. And there it is, cool. Let's double check in the database. And that looks correct. Next up, let's work on updating and deleting. So we want to make sure that only the person who created the Post

Next up, let's work on updating and deleting. So we want to make sure that only the person who created the Post can update or delete their own posts. So right now anyone can do it. So let's fix that. So let me comment this out and we'll just write the mutation for updating a post. Okay, so this is the mutation for updating a post. I'm updating post ID one. And let's go ahead and run this. And it should work because there's no auth in place yet.

Add PostPolicy via can3:23

And let's go ahead and run this. And it should work because there's no auth in place yet. Okay, so to check if a person has the correct permissions to perform certain actions, we can make use of the can directive, which works with Laravel policies. So let's go ahead and do that. So back to our code for updating Post on the schema. So down here, let's also set a guard here. So we have to be logged in. But let's also use the can directive here.

So we have to be logged in. But let's also use the can directive here. So can and the ability, which is the method in the policy, is going to be update. And we'll add the policy in a second. And we also have to add the find argument, which finds the model by the ID. Okay, so now let's go into that PostPolicy, which I should have here. PostPolicy, okay. And let's go to the update method. And now we can write to the logic for checking if the logged in User.

And let's go to the update method. And now we can write the logic for checking if the logged in user can update this post. So we can just do return $userId equals $postUserId. Okay. Sorry, typo. Okay, let's save this. Let's go back to GraphQL Playground. And now if I did that correctly, I'm currently logged in as user Andre. But user Andre did not create this post here.

And now if I did that correctly, I'm currently logged in as User Andre. But User Andre did not create this post here. So we should get unauthenticated. And we do, cool, or unauthorized. Now, if I provide a post I did create, and I just created one here. So 51, this should work. So 51, let's say Andre updated. Let's try this. And it still doesn't work. Sorry, I was looking at the wrong ID.

And it still doesn't work. Sorry, I was looking at the wrong ID. I was looking at this ID, but I meant to look at the actual post ID. So that's 53. So let's try that again, 53. This should work, hopefully. And it does, cool. Now 53, which is my post, should be updated. And it is, cool. And on the front end, there should be no changes necessary.

And it is, cool. And on the front end, there should be no changes necessary. So let's try this on the front end. I should be able to update my own Post. And currently I'm logged in as person. So let's try this out. Update person's Post. Updated. Change the title to updatePost. Okay, and that worked.

Change the title to updatePost. Okay, and that worked. But I should not be able to update Andre's post. Update, change, and we should get an error here. And we do, if we check out DevTools, we do get this unauthorized error. In the next video, we'll work on not being able to go to this page if we don't have the correct authorization. So let's do the same for delete here, pretty much the same thing. Let's copy this. Let's go to the delete method.

Let's copy this. Let's go to the delete method. Or where is it? delete, okay. Same thing. And the schema should be the same as well. So let's add the guard and the can directive to our deletePost here. And say delete. And this should work as well. So let's just try it in the browser.

And this should work as well. So let's just try it in the browser. So let's go back home here. Let me clear this. So I'm logged in as person, so I should not be able to delete Andre's post here. And you can see we do get that error. But I should be able to delete my own post. So let's delete this one here. And we do, cool.

Create Admin-Only Users Query6:49

So let's delete this one here. And we do, cool. So let me just add that back, just so we have a Post for our two Users for testing. Okay, one more thing I want to do here is add an admin page where they can see all of the Users. And only admins can access that page. So first we need to add an isAdmin method on the User model, or we can add a Boolean on the database as well. But I'll stick to just putting something in the User model here.

or we can add a boolean on the database as well. But I'll stick to just putting something in the User model here. So let's make a method for isAdmin. isAdmin, okay. And all I'm doing here is checking if certain emails are in this array. And if they are, they are considered an admin. So I have one email here. And now we want to be able to expose this isAdmin field within GraphQL. So let's go to our schema here. And let's go to our UserType.

So let's go to our schema here. And let's go to our User type. Let's add a new field here for isAdmin. Let's put it here. And if this came from the database, this would work, but it's not coming from the database. So how do we do this? First, it's a Boolean, so we can specify the type. And we can make use of the method directive to specify a method on the model,

And we can make use of the method directive to specify a method on the model, so we can return this field. So let's grab this. Say method is isAdmin. And now, whenever we query our users, we should get this isAdmin field back as well. So let's save that. Let's go back up here to our users query. And you can see I'm using pagination here,

Let's go back up here to our users query. And you can see I'm using pagination here, but just to keep it simple, I'll just use the all directive here. Let's go back into GraphQL playground. And let's try that out. So let me just comment this out. Let's try a query here for all of our users. I have to refresh here. So I say query users. And we have our name.

So I say query users. And we have our name. And you can see isAdmin as well in the fields right here. So if I scroll all the way down to my User, isAdmin is set to true. Now, like I said, we only want admins to be able to access this query. So we can use the can directive as well. We also have to make a new policy here. So let me just grab the can directive.

We also have to make a new policy here. So let me just grab the can directive. Let's paste it here. And we don't need the find argument because it's only taking in the user here. And the field is going to be viewAny. And let's put a guard on that as well. So let's go ahead and create a UserPolicy. So into our back end, php artisan make:policy UserPolicy and the --model is User.

So into our back end, php artisan make:policy UserPolicy. And the model --model is User. Let's check that out. Let's go to UserPolicy. View any is right here. And we can just say return $user->isAdmin. So let's try this out in GraphQL Playground. So right now, I am logged in as Andre, who is an admin. So this should still work. And it does.

So this should still work. And it does. But if I were to remove Andre from the isAdmin array in the User model, so let me just comment this out, we should get an authorization error. And we do. Cool. So let's put that back. Try again. And it does work.

Build Admin Page UI10:13

Try again. And it does work. So now we just have to create the page on the front end. So let's go ahead and do that. Back to our front end code. Make a new page here called admin.view. And to save time, I'm going to paste in the template. So we're going to grab the users in a second. And it's just outputting their name, email, and if they're an admin.

And it's just outputting their name, email, and if they're an admin. And actually, I'm just going to paste in the script as well. We've done this several times already. So we are performing this query here. And it will populate the user's key here. And it should output all of the information here. OK. So save that. Let's add it to the router.

So save that. Let's add it to the router. So let's just duplicate this. Let's say admin. Name it admin. And here. OK. And we also have to add it to the menu in app.vue. So I'm going to add it after menu here. This goes to /admin.

So I'm going to add it after me here. This goes to /admin. OK. Save that. Let's go back to our app. We have this admin route. And I'm currently logged in as person. So this should not show all of the users. And it doesn't.

So this should not show all of the users. And it doesn't. Cool. We get the correct error message. But if I were to log in as an admin, let's try that out. Log in. So this person, Andre, should be an admin. OK. And if I go to admin, we do get the users here. So you can see all the users in the system, including myself.

Commit Frontend and Backend11:41

And if I go to admin, we do get the users here. So you can see all the users in the system, including myself. And I am an admin here. So in the next video, we'll work on hiding and showing these menu items, as well as the update and delete links, based on whether or not we have the proper authorization. But for now, we can make commits in both of our projects. We have changes on both the front end and back end. So on the front end, say git add, git commit, authorization on front end.

So on the front end, say git add, git commit, authorization on front end. And on the back end, let's say git add, git commit, authorization on back end.

Ensure users can only edit their posts if they created itAdd a query that's only accessible for admins

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟