Laravel 5.5 Ajax 注销不重定向

Question

我正在尝试在 blade 视图中创建一个注销按钮，它可以在不重定向用户的情况下注销用户。我只想重新加载同一页面。

我认为 ajax 是最好的方法，（但我可能错了）。

这是我的按钮：

@if (auth()->check())
  <p>Vous êtes identifié en tant que <strong>{{ auth()->user()->name }}</strong>. <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Se déconnecter ?</a>
     <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
         {{ csrf_field() }}
     </form>
   </p>
@endif

这是我的 ajax 函数：

<script>
// Ajax Logout
$('#logout-form').on('submit',function(e){
    e.preventDefault(e);
    var dest_url = "{{ url('/logout') }}";
  $.ajax({
    type:"POST",
    url:dest_url,
    data:$(this).serialize(),
    dataType: 'json',
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    success: function(data){
      c = "success";
      t = "Succès";
      m = "Vous avez été déconnecté";
      i = "icon-circle-check";
      iziToast.show({
        class:"iziToast-"+c||"",
        title:t||"Sans titre",
        message:m||"-",
        animateInside:!1,
        position:"topRight",
        progressBar:!1,
        icon:i,
        timeout:9000,
        transitionIn:"fadeInLeft",
        transitionOut:"fadeOut",
        transitionInMobile:"fadeIn",
        transitionOutMobile:"fadeOut"
      });
    }
  })
});
</script>

我的路线文件(web.php)

Auth::routes();
Route::post('logout', '\App\Http\Controllers\Auth\LoginController@logout');

LoginController.php

 /**
 * Custom logout function with redirect back if ajax.
 *
 * @return void
 */
public function logout(Request $request) {
    $this->guard()->logout();
    $request->session()->invalidate();
    $request->session()->flash('errors', 'Vous êtes déconnecté');
    if($request->ajax()) {
        return Response::json(array(
            'success' => true,
            'data'   => 'Vous êtes déconnecté'
        )); 
    }
    else {
        return redirect('/');
    }
}

我想我遗漏了什么...

Answer 1

我的请求没有被Ajax执行，所以我去掉了logout-form表单，我监听了link上的点击事件。

我的 ajax 函数也有语法错误，在 'error:' 部分之前缺少一个 ','。

这是我的完整代码，没有多余的代码：

注销按钮

@if (auth()->check())
    <p>Vous êtes identifié en tant que <strong>{{ auth()->user()->name }} </strong>. <a id="logout_btn" href="#">Se déconnecter ?</a>
    </p>
@endif

Ajax函数

<script>
// Ajax Logout
    $('#logout_btn').click(function(e){

        e.preventDefault();
        var dest_url = "{{ url('/logout') }}";
  $.ajax({
    type:"POST",
    url:dest_url,
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    success: function(){
      c = "success";
      t = "Succès";
      m = "Vous avez été déconnecté";
      i = "icon-circle-check";
      iziToast.show({
        class:"iziToast-"+c||"",
        title:t||"Sans titre",
        message:m||"-",
        animateInside:!1,
        position:"topRight",
        progressBar:!1,
        icon:i,
        timeout:9000,
        transitionIn:"fadeInLeft",
        transitionOut:"fadeOut",
        transitionInMobile:"fadeIn",
        transitionOutMobile:"fadeOut"
      });
      $('form[name="reservation"]').load(document.URL +  ' form[name="reservation"]');
      $('.toolbar .account').load(document.URL +  ' .toolbar .account');

    },
    error: function(){
      console.log('Erreur lors de la déconnection via Ajax');

      c = "danger";
      t = "Erreur";
      m = "Une erreur s'est produite lors de la déconnection";
      i = "icon-ban";
      iziToast.show({
        class:"iziToast-"+c||"",
        title:t||"Sans titre",
        message:m||"-",
        animateInside:!1,
        position:"topRight",
        progressBar:!1,
        icon:i,
        timeout:9000,
        transitionIn:"fadeInLeft",
        transitionOut:"fadeOut",
        transitionInMobile:"fadeIn",
        transitionOutMobile:"fadeOut"
      });
    }
  })
});
</script>

登录控制器

/**
 * Custom logout function with no redirect if ajax.
 *
 * @return void
 */
public function logout(Request $request) {
    $this->guard()->logout();
    $request->session()->invalidate();
    if($request->ajax()) {
        return Response::json(array(
            'success' => true,
            'data'   => 'Vous êtes déconnecté'
        )); 
    }
    else {
        return redirect('/');
    }
}

Laravel 5.5 Ajax 注销不重定向

Laravel 5.5 Ajax Logout no redirect

jquery

ajax

laravel

laravel-5.5

logout

注销按钮

Ajax函数

登录控制器