Opt out of cached back behaviour in some cases about inertia HOT 2 CLOSED

With @reinink's help, I solved this by using the CSRF token stored as a cookie instead of manually adding it to my forms.

Laravel stores an XSRF-TOKEN cookie on responses: https://github.com/laravel/framework/blob/5.8/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php#L77

Axios reads the cookie and adds it to requests: https://github.com/axios/axios/blob/b4c5d35d2875191dfa8c3919d4227dce8e2ad23f/lib/defaults.js#L74

Submitting a form returns a response, so the cookie gets updated every time.

Since this solves my problem, I'm going to close this issue. If anyone needs this feature for other reasons, please respond and I'll reopen if necessary!

from inertia.

When converting an app to inertia I noticed this inconsistent behavior with pages that have Cache-Control: no-cache. As this particular app I am working on benefits more on having the state reloaded when navigating back, due to its collaborative nature, I came with the following solution.

On your app.js (the root component, so it is run only once) add this code to your mounted hook:

        mounted() {
            // ...other code

            const reloadOnBack = () => {
                this.$nextTick(() => {
                    this.$inertia.reload({preserveScroll: true, preserveState: false});
                });
            };

            window.addEventListener('popstate', reloadOnBack);

            this.$once('hook:beforeDestroy', function () {
                window.removeEventListener('popstate', reloadOnBack);
            });
        },

Running this code on the mounted hook makes its popstate handler to run after Inertia has set the page from history state, so Inertia will reload the navigated page data after inertia restored the previous page.

Ideally one should check the page's Cache-Control headers to adhere to browser behavior, but as stated above, for this particular app - and its very low user base (a business internal tool) - I skipped the check and reload the page's data on every "history back" event.

I understand and agree with the goal to mimic the most of browser behavior, specially the back button, but as I needed this exception on a project I thought it would be worth to share.

from inertia.