Authentication with Laravel Sanctum and Vue
This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
21. Switching to API resources

Episodes

0%
Your progress
  • Total: 1h 35m
  • Played: 0m
  • Remaining: 1h 35m
Join or sign in to track your progress

Transcript

00:00
Let's talk about using API resources rather than the default structure that we get when we install
00:05
a fresh Laravel project. Let's go ahead and sign in and then I'll show you what I mean. So if we head over to our network tab, you'll notice that when we go ahead and perform an action, let's go ahead and sign in again, just to demonstrate this, you can see that the user that we get back has a very specific structure and it reveals quite a lot about what is going on
00:29
in the database. A much better solution is to use API resources. So if we head over to our Laravel app and we open up our API routes, let's have a look at what's happening. In here, this route that we are calling to get the user's information, we're just dumping out the object which is converted into JSON. Let's switch this up for an API resource. So we're going to go ahead
00:52
and make out a resource here and we could just call this user resource, it doesn't matter, and instead of returning this user here, we are going to grab that user resource and we're going to make this passing that user in. Now, this isn't going to make any difference at the moment, apart from the fact that this data is now going to be wrapped in a data property.
01:14
If we head over to our app and give it a refresh, you see that the name has disappeared. You can see this user request here does contain all this information, but it's now wrapped in data. Now you've got two options, you can either update your client to take into account this data wrapper or you can disable it altogether. Now I prefer to disable it, so over in the app
01:33
service provider, I'm going to come down to our boot method here and I'm going to access the JSON resource class and I'm going to say without wrapping. So that will just set it back to normal and you can see that we just get exactly the same information. The difference now though is that over in that user resource, we can go ahead and update this. So let's open up the user resource,
01:54
you see by default it just does exactly the same thing as if we were to dump it, gives us JSON back, but we can now go ahead and structure this in a way that makes more sense and doesn't reveal too much. So we could say this ID, we might need the user's ID and we will probably need their name and we might even need stuff like their email address.
02:14
Let's just keep those three in there for now, you can go ahead and add more to this later if you need to. Okay if we head over and give this a refresh now, let's check out this request and there we go. You can see first of all we're sending a lot less data back and also we're not revealing the entire database structure.
21 episodes•1 hr 35 mins

Overview

Learn how to authenticate with a Laravel API from Vue using the Composition API.

We'll start by setting up a fresh Laravel project with Sanctum and Fortify, configure everything step-by-step, and then implement the ability to authenticate from Vue with a simple auth module — thanks to the flexibility of the Composition API.

In the second half of the course, we’ll create our own beautiful starter kit with more features, including registration and middleware to protect routes.

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

Comments

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