vue 구성 요소의 CSRf 토큰
Vue.js가 통합된 Laravel 5.3 프로젝트를 사용하고 싶다.CSRF-TOKEN내 모습으로양식 html 코드가 Vue 구성 요소 파일에 있음
resources / assets / js / bootstrap.js
난 이걸 가지고 있다:
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', MyApp.csrfToken);
next();
});
그러면 나는 메인 파일을 가지고 있다./resources/assets/js/app.js:
require('./bootstrap');
Vue.component('callbackwindow', require('./components/callbackwindow.vue'));
const app = new Vue({
el: '#app',
data: { },
});
그리고 Vue 파일에서 나는 사용할 필요가 있다.csrf_field하지만 어떻게 가야할지 모르겠어 왜냐면 표준 php가csrf_field()Vue 구성 요소 내에서 렌더링되지 않으며 가져오는 방법을 알 수 없음MyApp.csrfToken.
<template>
<div class="modal fade" >
<form @submit.prevent="submitForm" name="callback" method="POST" action="/" role="form" class="form-horizontal" enctype="multipart/form-data">
{!! csrf_field() !!}
...form code here...
</form>
</div>
</template>
<script>
export default { }
</script>
수입 가능 여부MyApp.csrfToken여기서부터 내 Vue 템플릿 파일까지 변수?
다른 방법으로:
1- 메타 태그에서 토큰 가져오기csrf-token의 내면에 이름을 붙이다<head>:
$('meta[name="csrf-token"]').attr('content')
2- Vue 구성 요소에 소품으로 전달:
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
마스터 템플릿에 crsf 토큰에 대한 메타 태그를 작성한 경우 이렇게 하십시오.
<template>
<form action = "/user/checkout" method="POST">
<input type="hidden" name="_token" v-bind:value="csrf">
....
</form>
</template>
구성 요소의 스크립트 태그에서:
<script>
export default{
data(){
return {
//csrf token
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
}
}
</script>
블레이드에서 다음 작업을 수행하십시오.
<Example-component csrf="{{csrf_token()}}"></Example-component>
Vue 구성 요소에서 다음 작업을 수행하십시오.
In form
<input type="hidden" name="_token" v-bind:value="csrf">
In Script
export default {
props: ['csrf', 'oldName']
}
crsrf 토큰을 정의할 수 있는 한 가지 방법은 다음과 같은 항목을 사용자의 작업에 추가하는 것이다.head기본 블레이드 파일의 섹션:
<script>
var MyApp = {
csrfToken: "{{ csrf_token() }}"
}
</script>
또는 다음과 같은 것을 가져올 수 있다.cookie도서관을 이용하다xsrf대신 토큰.
npm 포함:
npm install cookie
실과 함께:
yarn add cookie
그럼 네 안에서bootstrap.js파일:
import cookie from "cookie";
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-XSRF-TOKEN', cookie.parse(document.cookie)['XSRF-TOKEN']);
next();
});
이것이 도움이 되기를!
나는 같은 이슈를 가지고 있었고 이렇게 해결했다.글로벌 범위를 더럽히고 있어서 별로 자랑스럽지 않다.
다음을 추가하여:
app.properties에서php
<script>
var Laravel = {
'csrfToken' : '{{csrf_token()}}'
};
구성 요소/자녀 구성 요소 MyComponent에 포함.vue:
<form method="POST" action="/my/path" class="pull-right">
<input type="hidden" name="_token" :value="csrf">
<input class="btn" type="submit" value="Modify" />
</form>
<script>
export default{
data() {
return {
csrf: "",
}
},
mounted() {
this.csrf = window.Laravel.csrfToken;
}
}
</script>
토큰을 만든 후 할당
<script>
export default {
data() {
return {
token: '',
}
},
async created() {
this.token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
</script>
아이뷰를 쓰고 있어서 그렇게 썼어.
:headers="{'x-csrf-token' : token}"
그러나 보통은 다음과 같이
v-bind:value="token"
참조URL: https://stackoverflow.com/questions/41409893/csrf-token-in-vue-component
'IT이야기' 카테고리의 다른 글
| C에서 무료와 몰록은 어떻게 작동하는가? (0) | 2022.04.16 |
|---|---|
| C와 C++에서 다르게 작동하는 열거형 상수 (0) | 2022.04.16 |
| 실행자.newCacheThreadPool() 대 실행자.newFixed스레드풀() (0) | 2022.04.14 |
| Vue 테스트 유틸리티가 구성 요소 데이터를 업데이트하지만 돔을 다시 렌더링하지 않는 경우 (0) | 2022.04.14 |
| 구성 요소를 렌더링하기 전에 Vuex 상태가 로드되었는지 확인하십시오. (0) | 2022.04.13 |