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

Diagnosing Redirect Bug0:00

At the end of the previous episode, we found out that updating User from within a model doesn't work anymore. What's actually not the updating part that's broken, it's the redirecting part. So let's go into the editor and I'll show you what's wrong. Let's go to the UserController and let's scroll to the update method. And here below updating the eloquent model, I'm gonna dump out a request header and that's gonna be the referer.

I'm gonna dump out a request header and that's gonna be the referer. And we've seen this header before because we use it to determine the base URL of the model, but it's also used by this Back helper method. So url()->previous() is used, the Laravel Redirector, and based on this header, it redirects you back to the previous page after we've updated the User. All right, let's go to Firefox and add 1, 2, 3 it update. And here you can see that this header is the same.

All right, let's go to Firefox and add 1, 2, 3 it update. And here you can see that this header is the same as the current URL. So we are trying to redirect back to the same URL and that's obviously a mistake. Now if we refresh the page, we can see that the Eloquent model has been updated. So that part is fine. Let's go back to the controller and remove this header. And we're not gonna override this back helper method.

Adding backFromModal Macro1:16

and remove this header. And we're not gonna override this back helper method or mess with the Laravel framework. We're gonna introduce another macro. I'm gonna use the Inertia facade and let's call this one backFromModal. Let's copy it and let's go into our AppServiceProvider. And here we're gonna introduce another macro responseFactory macro backFromModal. So what we wanna do here is redirect back to the base URL

response factory macro back from modal. So what we wanna do here is redirect back to the base URL and we also want to have some kind of fallback and that's just gonna be the default back helper method. And at base URL, we're actually already sharing it with the front end. So here we have our _modal key with the modal data. We have our components, the props and the base URL. So whenever we submit a form, we need some kind of way to

Sending Base URL Header2:10

We have our components, the props and the base URL. So whenever we submit a form, we need some kind of way to send this back to the back end so that we know what the original base URL was when submitting a form. And we can do it actually with Axios. So let's go to our layout file. And in here I'm gonna import Axios from Axios. And Axios has this concept of interceptors where we can interact with a request or response. And what we wanna do is tell Axios every time when you make a

where we can interact with a request or response. And what we wanna do is tell axios every time when you make a request to the backend, we want you to stand along the base URL as a header and we can do it with an interceptor. So let's see how that works. Let's go to our watcher. And in here if we have a modal, then we want to use an interceptor. So axios.interceptors.request.use. And then we can name the interceptor,

So XiO, exos interceptors request use. And then we can name the interceptor, something like atBaseURLToRequest. And I'm gonna copy this line into this block. And instead of use, we're gonna call eject. 'cause if there's no model around, then we don't want to use this interceptor anymore. Um, let's create it here. function atBaseURLToRequest(). And that's gonna accept a config and we always want to return this config,

And that's gonna accept a config and we always want to return this config, otherwise XOs breaks. And this config is an object with a header subject. And here we can send a new header along. So let's name it xModalBaseURL. And we're gonna set it to pageProps.modal. Then we want to use the base URL. And just to be safe, in case the ejecting goes wrong, we want to check if this modal object is really around.

And just to be safe, in case the ejecting goes wrong, we want to check if this modal object is really around. So let's do it like this. If we have a modal prop, then we want to send this XModal base URL, uh, with this value. And remember this base URL comes from our macro. So in here where we share the _modal object here, we send along the base URL. Alright, let's save this file and let's grab the header name and then I'm gonna dump it out.

Alright, let's save this file and let's grab the header name and then I'm gonna dump it out. So below User, let's do request header and then our new header with this letter. Um, let's refresh, hit edit it update. And here you can see that this header is now pointing to the User profile. So not to the edit page though. That works great. Uh, let's remove it again here. But I'm gonna copy this line.

Redirecting Using Base URL4:57

Uh, let's remove it again here. But I'm gonna copy this line so we can implement our backFromModal macro in our AppServiceProvider in here. We gonna check if we have a baseURL like this. If it's in the header, then we gonna return with a redirect to the baseURL. And let's change this to the global request helper method. Yeah, that should do it. Let's see, let's, um, let's close this one.

Yeah, that should do it. Let's see, let's, um, let's close this one. Let's go to the User profile. Let's hit edit and let's remove 1, 2, 3 hit update. And that seems to work. So now we're back at the User profile. Let's see if it works from the index page 1, 2, 3 and update. And that works as well. Now let's see if validation works.

Fixing Validation Redirects5:52

1, 2, 3 and update. And that works as well. Now let's see if validation works. Edit, let's remove the name at all and hit update. And that doesn't work yet and that's actually the same problem. So let's go to the UserController. So here we are validating the incoming request data. And this is gonna fail because the name is missing and when it fails, it's gonna redirect back to the previous page, which is our edit route.

and when it fails, it's gonna redirect back to the previous page, which is our edit route. But now the edit route has the wrong referer, it has the wrong base, URL. Let's see why that is. In AppServiceProvider, we are setting the base URL to this Referer header, which is now the edit page itself. So again, we are redirecting back to the same page, but luckily we have this interceptor. So we already know the right base, URL,

but luckily we have this interceptor. So we already know the right base URL, we're sending it along with each request. So I'm gonna grab this one and let's do this. Let's set the base URL to our new XModal base URL header. And if this one is not around, then we are going to use the referer header. And if that one is not around, then we're going to use the base URL that we're passing from the controller.

And if that one is not around, then we're going to use the base URL that we're passing from the controller. Let's see if this works. Let's refresh, edit, remove the name and hit update. And this kind of works. We now have a validation error, but our old name is back and that's because of our authenticated layout in here. We are getting a new model prop,

Preventing Modal Re-render7:32

in here. We are getting a new model prop, but we already have a model opened. So what we wanna do is check in setModal if this modalRef is already set. So if we have a modal around, if we have a model value, then we're gonna return early and then we don't want to do anything. So let's see if that works. Uh, we don't have to change anything in here.

So let's see if that works. Uh, we don't have to change anything in here. Let's remove the name once more. And now we have a validation error and our model is not re rendered. Let's see if updating still works. update and that works as well. So now we have route-based models that you can open from any URL. Uh, it supports validation, it supports flash messages.

that you can open from any URL. Uh, it supports validation, it supports flash messages. Um, it's really great. So see you in the next one.

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