Unable to logout from Laravel application when using event.preventDefault. Alternative?

Question

So I a couple of forms in my application looking like this :

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    {!! Form::open(['action'=>['AdminController@update',$upload->id,0], 'method'=>'POST']) !!}
    {{Form::hidden('_method','PUT')}}
    <a class="dropdown-item" href="/manage">Approve</a>
    {!! Form::close()!!}

    {!! Form::open(['action'=>['AdminController@update',$upload->id,1], 'method'=>'POST']) !!}
    {{Form::hidden('_method','PUT')}}
    <a class="dropdown-item" href="/manage">Reject</a>
    {!! Form::close()!!}

</div>

I am sending these forms using the following jQuery snippet:

$(".dropdown-item").click(function(e){
    e.preventDefault();
    $(this).closest("form").submit();
});

I noticed that when this snippet is not commented out, I am unable to log out from my Laravel app. The log out just doesn't work.

I am using standard Laravel authentication.

This is part of how I log out:

<a class="dropdown-item" href="#" onclick="window.location='{{ route('logout') }}'">Log out</a>

First, can someone explain why this is happening? I tried to investigate, but what I read didn't make much sense, since I am new to all of this.

And what would be the workaround here? How can I send these forms without the preventdefault method? Or how can I log out while using it? I'd prefer not to change my log out functionality.

Answer 1

So to log out the user, you need to hit route('logout') which is a predefined route when you scaffold laravel auth system.

The logout route its definded under /src/Illuminate/Routing/Router.php line 1125. It needs to be a post request in order to logout the user, there are no required parameters to be sent expect laravel csrf token, which is the token to make sure that the requests are comming from the app itself and not any external script.

If you go to logout function which is hidden under LoginController you will see a trait(simply to keep the class cleaner) AuthenticatesUser Trait it is responsible to logout the user.

In AuthenticatesUser trait you will find a method at line 151:

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

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

    return redirect('/');
}

which in simple terms it logs user out of session guard (Guards define how users are authenticated for each request.) and then destroys the session and the user its logged out with a redir to homepage.

Now as said we need a post request with csrf token to log the user out:

    <a href="{{ route('logout') }}"
      onclick="event.preventDefault();       

       document.getElementById('logout-form').submit();">
       Logout
   </a>

Form placed under the a href tag

 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
     {{ csrf_field() }}
 </form>

The a href tag which has event.preventDefault() which in simple terms means prevent a href tag from acting how normally it acts. That being said a href tag will not redirect to the route, instead we have document.getElementById('logout-form').submit();"> which simply gets the form logout-form and submits it whenever the user clicks on that a href tag

Or simply change 'dropdown-item' class name for your logout form , since prolly that is being frozen when both forms are active.