如何使用laravel 5.4通过jQuery/ajax创建登录/注销

php artisan make:auth

<form id="login-form" method="POST" action="{{ route('login') }}">
    @csrf
    <!-- 表单字段 -->
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#login-form').submit(function(e) {
            e.preventDefault(); // 阻止表单默认提交行为

            var formData = $(this).serialize(); // 序列化表单数据

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                success: function(response) {
                    // 登录成功后的处理逻辑
                },
                error: function(xhr, status, error) {
                    // 登录失败后的处理逻辑
                }
            });
        });
    });
</script>

use Illuminate\Support\Facades\Auth;

public function login(Request $request)
{
    $credentials = $request->only('email', 'password');

    if (Auth::attempt($credentials)) {
        // 登录成功后的处理逻辑
        return response()->json(['message' => '登录成功']);
    } else {
        // 登录失败后的处理逻辑
        return response()->json(['message' => '登录失败'], 401);
    }
}

<button id="logout-button">注销</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#logout-button').click(function(e) {
            e.preventDefault(); // 阻止按钮默认点击行为

            $.ajax({
                url: '{{ route('logout') }}',
                type: 'POST',
                data: {_token: '{{ csrf_token() }}'},
                success: function(response) {
                    // 注销成功后的处理逻辑
                },
                error: function(xhr, status, error) {
                    // 注销失败后的处理逻辑
                }
            });
        });
    });
</script>

use Illuminate\Support\Facades\Auth;

public function logout(Request $request)
{
    Auth::logout();

    // 注销成功后的处理逻辑
    return response()->json(['message' => '注销成功']);
}