javascript - 使用 event.preventDefault 时无法从 Laravel 应用程序注销。选择？

Question

所以我在我的应用程序中有几个表单如下所示:

<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>

我使用以下 jQuery 片段发送这些表单:

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

我注意到当这个片段没有被注释掉时，我无法从我的 Laravel 应用中注销。注销只是行不通。

我正在使用标准的 Laravel 身份验证。

这是我注销方式的一部分:

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

首先，有人可以解释为什么会这样吗？我试图调查，但我读到的内容没有多大意义，因为我对这一切都是陌生的。

这里的解决方法是什么？我如何在没有 preventdefault 方法的情况下发送这些表单？或者如何在使用时注销？我不想更改我的注销功能。

Answer 1

因此，要注销用户，您需要点击 route('logout')，这是在搭建 laravel 身份验证系统时预定义的路由。

注销路由在 /src/Illuminate/Routing/Router.php line 1125 下定义。它需要是一个 post 请求才能注销用户，没有必需的参数发送期望 laravel csrf token ，这是确保请求来自应用程序本身而不是任何外部脚本的 token 。

如果你转到隐藏在 LoginController 下的注销功能，你会看到一个特征(只是为了保持类更清晰)AuthenticatesUser Trait 它负责注销用户.

在 AuthenticatesUser 特征中，您将在第 151 行找到一个方法:

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

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

    return redirect('/');
}

简单来说，它将用户从 session 守卫中注销(守卫定义用户如何针对每个请求进行身份验证。)然后销毁 session ，用户通过 redir 登出到主页。

现在如前所述，我们需要一个带有 csrf token 的 post 请求来注销用户:

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

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

表单放在a href标签下

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

具有 event.preventDefault() 的 a href 标签，简单来说就是防止 href 标签正常运行。也就是说 a href 标签不会重定向到路由，相反我们有 document.getElementById('logout-form').submit();"> 它只是获取表单 logout-form 并在用户点击该 a href 标签

时提交

或者简单地更改您的注销表单的 'dropdown-item' 类名，因为很可能当两个表单都处于事件状态时它会被卡住。