Reload Page after logout with VUE

By default, logout returns a redirect 30x response rather than a 2xx.

You could either (i) change how the API responds (return say a 204) by overriding the logout method with your own implementation in LoginController, or (ii) handle a 3xx response with an Axios Interceptor.

My personal preference would depend on whether logout could be called normally as well as asynchronously.

Im getting the 302 on log out and then getting a 401 which is the issue I think

tried something like

  axios.post('logout').then(response => {
                    if (response.status === 302 || 401) {
                        console.log('logout')
                    }
                    else {
                        // throw error and go to catch block
                    }
                }).catch(error => {
                    //run this code always when status!==200
                });

You will not resolve the Promise if you get anything other than a 2xx response AFAIK.

If the page you are on whenever you logout required authentication, then 401 is expected, right.

Why not simply redirect to login.

the issue is its knowing what response to capture and push on to the then

I think you're making your life too complicated; maybe a full post back is more appropriate since you are trying to do a reload anyway?

yeah, I'm thinking that This whole Vue thing melts my brain! If I had my way a simple sever call would work, but my front end dev won't have it

why you want to handle logout in vue part? I don't think this is a good idea

So, given that constraint, here is how I might approach it:

In order for the Promise resolve function to fire, you need a 2xx response status code. So, in LoginController, override teh logout method that is defined in the AuthenticatesUsers trait:

// LoginController

public function logout(Request $request)
{
        $this->guard()->logout();

        $request->session()->invalidate();

    if ($request->wantsJson()) {
        return response()->json([], 204);
    }

        return redirect('/');
}

Now, you can respond with an empty (but successful) JSON response, which will allow you to define how/where to relocate in the Vue app. I don't think location.reload() is appropriate since you will probably be on a page that required authentication before you logged out, so if using Vue Router:

router.push('login')

or, if not

document.location.href = "/login";

Thank you very much!! Works like a charm