در حال بارگذاری ...

Intercepting All Requests0:00

All right, so you saw action interceptors. Let's look at the broader picture, entire request interceptors for your application. You can do some crazy things. Let's take a look. So before we had this intercept, delete, we were intercepting an action. Well what if instead of that we said intercept request, you can actually still scope it by an action, but in this case, I don't want to, I just wanna say, intercept all the requests related

but in this case, I don't want to, I just wanna say, intercept all the requests related to this component right here and allow us to do stuff. So I think a lot of this stuff will still work, like on send and on finish. So let's just do that on send on finish. Let's make sure that this is still working. I hit delete and ah, it did work. I dunno if you saw that it, it made the background transparent for a second,

Custom Redirect Handling0:41

I dunno if you saw that it, it made the background transparent for a second, but I actually un commented or commented back out the deleting the post and redirecting. So that part still worked. Um, but yeah, it did work. Okay, well uh, we're redirecting. Let's build on that. So we redirect inside, delete to post, right? Well, when you intercept a request, you have full power over all the things in Livewire. Watch this on redirect. So let's just replace these.

over all the things in Livewire. Watch this on redirect. So let's just replace these. Let's get rid of these on redirect here. We'll do something. You actually get some pretty valuable things inside here like the URL and prevent default. This is really powerful. We could say prevent default. And now we're gonna say, Hey Livewire, you don't handle redirecting. I'm gonna handle redirecting. And you have access to the URL. So let's log that out.

I'm gonna handle redirecting. And you have access to the URL. So let's log that out. Console dot log URL. Maybe we'll alert it. I don't know. Is that better? No, it's not better because it actually alerts. We'll pause the page so it doesn't actually demonstrate our point. Okay, so here's our console. We hit delete and look the back end tried to redirect, but the front end said, Hey, we're gonna handle redirect

We hit delete and look the back end tried to redirect, but the front end said, Hey, we're gonna handle redirect and it just console logged out the URL. So you could do whatever you want. Maybe you have a live O app with special needs of some sort. Like oh, when we redirect in a certain way to a certain place, we want to handle it differently or store something in the database first to like prevent the redirect until we store something about the redirect.

Handling Request Errors2:07

to like prevent the redirect until we store something about the redirect. I don't know. But you can do that. You can do anything you want in here, which I think is really, really, really cool. Alright, so we prevented redirect. Let's do another really powerful thing with a request. If we throw an exception, like something went wrong, we can intercept that with on error at the request level. So we can say on error.

we can intercept that with on error at the request level. So we can say on error. And then inside here we do whatever we want and we get some pretty cool stuff. And one of that really one of those really cool things, you get the response but you also get prevent default again. So you can say, Hey, I want to prevent the default behavior of Livewire from handling that error entirely. And let's console log out response. Okay, so we get a 4 0 4 not found

And let's console log out response. Okay, so we get a 4 0 4 not found because I think we actually did delete the post, right? So let's go to another post and we hit delete and look at that. We threw an error that the request actually threw a 500 error, but that modal, that livewire throws didn't pop up at all. Maybe you hate live wire's. Error modal, build your own, you can,

Maybe you hate live wire's. Error modal, build your own, you can, you can just intercept errors even globally. You can intercept errors, you can do whatever you want with it. We just logged out the response object where you get things like status code. We know that the status code was 500. This is a a reason that I think a handful of people will actually use this feature.

Custom 419 Expiry Flow3:22

This is a a reason that I think a handful of people will actually use this feature. They'll say if response do status is equal to four 19. So what's a four 19? The four 19 is when the session expires for whatever reason for your user. But they haven't like refreshed the page. So they don't have a new session cookie. So they try to interact with the, with this long standing page, maybe they had a tab open

So they try to interact with the, with this long standing page, maybe they had a tab open for a month, they go back, they try to interact with it. Or maybe you deployed something that shifted your app key or something and invalidated all your user sessions. The next thing they do in Livewire is gonna trigger a four 19 response. 'cause that's how Laravel works. And we by default show a little confirmation. So let me actually comment that out

And we by default show a little confirmation. So let me actually comment that out and we'll just see that work. So I have the page here. I am going to wipe the database so that it reseeds everything and creates a new user session, but it didn't refresh the page. So now I hit delete and it goes, oops, the page has expired. Would you like to refresh the page? Sure. That's what livewire does by default.

Would you like to refresh the page? Sure. That's what livewire does by default. Okay, well let's change that on error. If response status is equal to four 19, prevent the default handling. This is where, I don't know, do whatever you want, but we're just gonna keep doing confirmations. I guess maybe we'll just do an alert to make it easy. We'll just say alert page expired. Yo. Okay, so now if that four 19 gets triggered just for fun,

We'll just say alert page expired. Yo. Okay, so now if that four 19 gets triggered just for fun, another way that you can get rid of a, or you can trigger a four 19 is you go into application and you find the cookies and you find the user cookie stuff and this is all that stuff. And can we just clear all these? Is that easy? Does that work? Okay, now if I try to do that, yeah, page is expired because the user lost their session cookie. So it's gonna say expired and it does.

page is expired because the user lost their session cookie. So it's gonna say expired and it does. And if the page is not expired, but the 500 error is still thrown, it's gonna be handled normally because we're only handling four 19 errors. So now I hit delete and we get the full error experience of live wire outta the box. This is super powerful. Maybe you wanna do this for your entire Laravel app.

Global Layout Interceptors5:19

This is super powerful. Maybe you wanna do this for your entire Laravel app. How do you do that? Well, you could do this exact kind of thing inside of your layout file. So let's go to layouts, app blade PHP, scroll all the way to the bottom where we have our livewire scripts. We'll add our own script tag, we'll say document dot add event listener, and then live wire and knit. 'cause we wanna make sure that livewire is knitted.

and then live wire and knit. 'cause we wanna make sure that livewire is knitted. And then inside here we put a bunch of this stuff, whoops. But it's not gonna be this dot if you think about it because that doesn't exist. We're not inside a livewire component. It's livewire intercept request. And now you're intercepting every live wire request for your entire application. You can do this same thing.

for your entire application. You can do this same thing. You can intercept every action for your entire application, every message, and do all sorts of things to your entire application if you so choose. But in this case, we just want to intercept redirects and we also want to intercept errors. So let's see that this still worked. If I try this and I hit delete, it's gonna throw the error, right?

If I try this and I hit delete, it's gonna throw the error, right? But now I want to change the session. So let's remigrate the database. And now if I try to hit delete, it's gonna say page expired yo. And that was at a global level, but that didn't actually prove anything. 'cause I have this interceptor still here, so let's get rid of that.

'cause I have this interceptor still here, so let's get rid of that. It's gonna still work and be anticlimactic, but uh, let's just trigger it anyway. So now I hit delete. And there we go. It intercepted at a page request level. You can intercept dumps, you can intercept redirects, you can intercept errors and prevent default. You can even intercept streams. If you use streaming in live wire, you can intercept them

Wrap-Up and Signoff6:49

You can even intercept streams. If you use streaming in live wire, you can intercept them and do stuff with the streams yourself. You can, you can do everything. So I think this is a really good way to kind of cap off the series where we've been building and building and building and now we're getting into the weeds and the deep stuff. But as a creator of Livewire, these things excite me almost more than anything else.

But as a creator of Livewire, these things excite me almost more than anything else. And I say that about everything. So thanks for joining me on this journey. It's been wild. It's been really gratifying. I guess we're doing a sign off here. It's been really gratifying as the creator of Livewire to see how far it's come and to see all these interactions and all these APIs that feel elegant, they feel cohesive, but, but we're just like making it more

and all these APIs that feel elegant, they feel cohesive, but, but we're just like making it more and more powerful without making it feel more and more complicated. It's just like all these things feel like they fit together into a nice little puzzle and ah, I just love it. It's gratifying. So thanks for using Livewire. Thanks for following along the whole journey. Thanks for caring about it. Thanks for everything. I'll be seeing you.

Thanks for caring about it. Thanks for everything. I'll be seeing you.

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