Conflict Between Bootstrap Script & Logout Route

NB: I am a Laravel noob.

So i did a fresh Auth scaffolding with Laravel breeze and wanted to try out Bootstrap 5. Whenever i include the script tag to link to the bootstrap-min-js file i get a "The Get method is not supported for this route." error when i try logging out. When i remove the tag, the logout function works perfectly. What could be the issue?

jlrdw

5 years ago

Best Answer

Level 75

A form is used to logout:

                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                                {{ __('Logout') }}
                            </x-dropdown-link>
                        </form>

Unless bootstrap isn't loading correctly and interfering with:

this.closest('form').submit();

You can rewrite logic something like:

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
     <a class="dropdown-item" href="{{ route('logout') }}"
        onclick="event.preventDefault();
        document.getElementById('logout-form').submit();">
        {{ __('Logout') }}
         </a>

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

Notice the change to document.getElementById.

But really a little trial and error here and you should be able to work it out.

1 like

Please or to participate in this conversation.