Heim > Fragen und Antworten > Hauptteil
Ich habe ein Projekt mit Laravel Inertia und Vue Js. Ich habe heutzutage Probleme mit CSRF-Tokens. Ich habe die Dokumentation hier https://inertiajs.com/csrf-protection gelesen, daher sollte ich vielleicht das CSRF-Token bei jeder Trägheitsanfrage/-antwort hinzufügen.
Meine Frage ist, wie füge ich dieses _token global hinzu? Ich muss meiner Vue-Datei also nicht einzeln Token hinzufügen, da sie zu viele Dateien enthält.
Mein aktueller Skriptcode auf 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 }); }
Mein HandleInertiaRequest (Middleware):
<?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(), ]; }, ]); } }
P粉7948519752023-12-11 16:03:58
在您的 Middleware/HandleInertiaRequests.php
文件中全局添加 csrf 令牌。
/** * 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(), ]); }
在您的表单中添加实例。
<input type="hidden" name="_token" :value="this.$page.props.csrf_token">
最后,进行调用,在下面的示例中,我使用 Inertia useForm() 函数来登录用户。
<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>