Bagaimana untuk menambah _token csrf secara global pada Laravel Inertia?

Question

Saya mempunyai projek menggunakan Laravel Inertia dan Vue Js. Saya menghadapi masalah dengan token csrf hari ini. Saya telah membaca dokumentasi di sini https://inertiajs.com/csrf-protection, jadi mungkin saya harus menambah token csrf pada setiap permintaan/tindak balas inersia.

Soalan saya ialah, bagaimana untuk menambah _token ini secara global? Jadi saya tidak perlu menambah token pada fail vue saya satu persatu kerana ia mempunyai terlalu banyak fail.

Kod skrip semasa saya pada login.vue:

props: {
        errors: Object,
        session: Object,
        auth: Array
    },

    //define composition API
    setup(props) {
        //define form state
        const form = reactive({
            email: '',
            password: '',
        });

        //submit method
        const submit = () => {

            //send data to server
            Inertia.post('/login', {

                //data
                email: form.email,
                password: form.password,
                _token: props.auth.csrf
            });
        }

Permintaan Inertia Handle Saya (perisian tengah):

<?php

namespace AppHttpMiddleware;

use IlluminateHttpRequest;
use InertiaMiddleware;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that's loaded on the first page visit.
     *
     * @see https://inertiajs.com/server-side-setup#root-template
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determines the current asset version.
     *
     * @see https://inertiajs.com/asset-versioning
     * @param  IlluminateHttpRequest  $request
     * @return string|null
     */
    public function version(Request $request): ?string
    {
        return parent::version($request);
    }

    /**
     * Defines the props that are shared by default.
     *
     * @see https://inertiajs.com/shared-data
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            //session
            'session' => [
                'status'    => fn () => $request->session()->get('status'),
                'success'   => fn () => $request->session()->get('success'),
                'error'     => fn () => $request->session()->get('error'),
            ],
            //user authenticated
            'auth' => [
                'user'          => $request->user() ?   $request->user() : null,
                'permissions'   => $request->user() ? $request->user()->getPermissionArray() : [],
                'csrf' => $request->session()->token()
            ],
            //route
            'route' => function () use ($request) {
                return [
                    'params' => $request->route()->parameters(),
                    'query' => $request->all(),
                ];
            },
        ]);
    }
}

Answer 1

Tambahkan token csrf secara global dalam fail Middleware/HandleInertiaRequests.php anda.

/**
 * Defines the props that are shared by default.
 *
 * @see https://inertiajs.com/shared-data
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function share(Request $request): array
{
    return array_merge(parent::share($request), [
          'csrf_token' => csrf_token(),
    ]);
}

Tambahkan contoh pada borang anda.

<input type="hidden" name="_token" :value="this.$page.props.csrf_token">

Akhir sekali, buat panggilan, dalam contoh di bawah saya menggunakan fungsi Inertia useForm() untuk log masuk pengguna.

<script setup>
  import { useForm } from '@inertiajs/vue3'

  const form = useForm({
    email: String,
    password: String,
    _token: String,
    processing: false,
  });

  let submit = () => {
    form.processing = true
    
    form.post('/login')
  }
</script>