Laravel, Axios и выход из системы через AJAX

Всего несколько минут назад мне нужно было выйти из моего приложения Laravel + React (это обычно), но с помощью Axios. Я попытался сделать это сразу же, отправив запрос POST через Axios для выхода из системы, но он не перенаправляет себя (будучи XHR) и не промис then (потому что Laravel отправляет статус 302, а не любой из кодов 2XX).

Поэтому я придумал решение ниже, которое просто проверяет, является ли запрос XHR (т.е. имеет ли Accept: application/json или аналогичный) заголовок, он отвечает 204 код состояния.

Для этого все, что вам нужно сделать, это переопределить метод loggedOut из типажа AuthenticatesUsers в вашем классе LoginController следующим образом:

<?php

namespace App\Http\Controllers\Auth;

use ...

class LoginController extends Controller
{
    ...

    /**
     * The user has logged out of the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    protected function loggedOut(Request $request)
    {
        if ($request->wantsJson()) {
            return response()->json([], 204);
        }
    }
}

Затем просто отправьте запрос POST для выхода из системы и перенаправления пользователя в обратном вызове Promise следующим образом:

import React from 'react';
import ReactDOM from 'react-dom';

const handleLogout = () => {
    axios.post('/logout')
        .then(() => location.href = '/home')
};

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>
                        <div className="card-body">
                            <p className="card-text">I'm an example component!</p>
                            <button className="btn btn-light" onClick={handleLogout}>Logout</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Или, если вы используете Vue.js:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        <p class="card-text">I'm an example component.</p>
                        <a class="btn btn-light" @click="logout">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            logout() {
                axios.post('/logout')
                    .then(() => location.href = '/home')
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Вот и все! Теперь у вас есть выход из системы и перенаправления (как вы хотите). Если вам нужно, для справки также есть суть с приведенным выше кодом на https://gist.github.com/vaibhavpandeyvpz/c5a57cb34f34bbdd728a4a746d318d94.

Laravel, Axios и выход из системы через AJAX

Вопросы по теме