This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
37. Basic Inertia permission checking

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
We're now going to cover some basic authorization within Inertia and the connection between the backend within Laravel into Vue. Now there are a ton of ways you could do this, but the easiest way to do this is obviously create our policy, which we already have for our discussion. So we have a discussion policy and then just pass whether you're allowed to do things through a resource
00:24
or directly through your controller. Now we're making use of API resources, so that would be a really good place to put it, and then we have what we're allowed to do within context. So just to give you a demo of this, let's copy down this create method that we created out earlier and let's create a permission to see if we can reply to a specific discussion. So unlike creating a
00:46
general discussion, this relates to a very specific discussion. Now we're going to still send this down as return true because implicitly by checking this, the user has to be authenticated. So if the user is not authenticated, they will not be able to actually send a reply. So this will unauthorize them. We're kind of blending the lines between authentication and authorization, but really it
01:11
doesn't matter. If you have any other conditions later on, for example, if the discussion is locked, we want to make sure that we take that into account. So for now we're just going to return true and look at these basic permissions, and we're going to add some real permissions a little bit later. Okay, so let's go over to our post resource or our discussion resource, and let's
01:35
see how we can pass these down. It's really up to you what you do here, but what I typically do is create out a user can array with all of the authorization points that we could possibly get to. So reply would be auth user can reply, and then we need to access the current discussion that we're in the context with inside of this discussion resource. To do this, we just reference
02:04
this resource. This resource will give us back a discussion model, which we know we can pass directly through to can. So now what we have is in our overall discussion, a very simple authorization or a permission, whatever you want to call it, to see that we can check and we can hide things and show things based on this. So now that we've got that, let's head over to the show page
02:27
and this primary button up here to see whether we can reply or not. We can add a very simple check to this. Now we can also include auth user as well if we want to, but really what we need to do or all we can do is just say discussion user can reply. So if we can reply to this, show the button. At the moment, that is true. If we manually set this over in the discussion policy to false,
02:54
you'll see that that just simply disappears. So we know now that we've got a very simple single place that we can use to check whether a user can reply to a particular discussion. Now we can do the same thing directly within the post component here and just underneath the body we can go ahead and create out, let's create out another list here and inside of here we're going
03:18
to have some list items, whether we're allowed to reply or not. Now to reply, this needs to be a button because we need to trigger the reply form. So we'll do that in just a second, but we'll just add reply in there for now. The condition of this is for the actual post itself and the discussion within that post, can the user reply? So we can just say user can and then dot reply. Now let's
03:40
just make sure we've got this set up properly. So if we head over to our post resource, we don't have a reference back to the discussion in here just yet. So let's go ahead and just copy one of these down and reference the discussion in here. We are kind of getting into the realm of loading quite a bit of data in here, but it's not too much. So let's say discussion resource, when we've
04:01
loaded this discussion, eager loaded this discussion, show that discussion as part of a post. That just means that if we're ever fetching a post out on its own somewhere, anywhere within our app, we can access the discussion that this actually relates to. So over in our discussion show controller, we want to make sure we are loading in posts and the discussion as part of
04:25
that post. So we'll double check our query count in a sec, but we should see this reply button. Again, if we come over to our discussion policy and set this to false, you'll see that that is now longer an option, no longer an option. So let's go ahead and just style this up because this will make really useful for us to just add more later. So again, we'll just use flexbox here to set the
04:48
items to center. We'll set a space on the X axis here to say three and we'll set a margin top of six. For each of these items, we're going to give these specific styles. So let's set the text to indigo 500. That should do it. And let's go ahead and set the text to small here as well. So let's have a look. And yeah, I think that looks OK. Of course, you can change this up if you want to. So last thing we want
05:16
to do is be able to click on this to actually reply. We can click on this to reply, but not this button at the moment. So again, we know that because we are using a composable and that's holding our state, we can just pull this directly into this post component and then trigger that reply form directly from there. So we're going to go ahead and import use create post and we're going to go ahead
05:38
and destructure the data that we want from this. So let's say use create post and we want the ability to show the create post form and we can just very easily trigger that from this button. So be on click and let's go ahead and pass that in, not forgetting that we need to pass the discussion in to this for context. So now we can trigger that directly from there very easily
06:07
without having to do any kind of magic. We have just triggered this from this composable and it works really nicely. So we've got multiple places now that we can trigger this from. Eventually, we're going to modify this. So when this does appear, we add the user who we are replying to directly. But we'll get to that a little bit later when we work on our mentions.
62 episodes6 hrs 54 mins

Overview

Ready to build a forum with Inertia and Laravel?

Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.

So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.