laravel - csrf toke 没有在 laravel 8 中传递给 vuejs

问题描述

我正在尝试在 laravel 8 中使用 vuejs 制作文件上传器，为此我使用以下元标记：

<meta name="csrf-token" content="{{ csrf_token() }}">

但不幸的是，我仍然收到错误 419。我在下面分享页面源和控制台结果的屏幕截图：

页面来源：

控制台结果：

我的 axios 代码是：

export default {
data(){
    return{

    }
},
methods:{
    async callApi(method, url, dataobject){

        try{
          return await axios({
             method: method,
             url: url,
             data: dataobject
           });

        }catch(e){
          return e.response
        }
      }
    }
  }

test.vue 中的代码（我希望上传者应该在其中工作）：

<template>
 <div>
       
    
      
        <Button type="success" @click="addname=true">Add New Name</Button>
        <table>
                <tr>
                    <td>Name</td>
                    <td>Created At</td>
                    <td>Action</td>
                </tr>
                
                <tr v-for="(item, i) in array" :key="i" v- 
                 if="array.length">   
                    <td>{{ item.name}}</td>
                    <td>{{ item.created_at}}</td>
                    <td>
                        <Button type="info" size="small" 
                         @click="showEditModal(item, i)">Edit</Button>                                  
                        <Button type="error" size="small" 
                         @click="showDeletingModal(item,i)" 
                         :loading="item.isDeleting">Delete</Button>
                    </td>
                </tr>
        </table>
     </div>    

      <!-- Add --> 

     <Modal v-model="addname" title="Add New Name" :mask-closable= "false" 
     :closable = "false" >              
            <Label>Your Name</Label>
            <Input v-model ="data.name" type="text" />
            <Upload
                multiple
                type="drag"
                action="/upload">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: 
                     #3399ff"></Icon>
                    <p>Click or drag files here to upload</p>
                </div>
            </Upload>
            <div slot="footer">
                <Button type="error" @click="addname=false">Close</Button>
                <Button type="success" @click="addData" 
                :disabled="isAdding" :loading="isAdding">{{isAdding ? 
                'Adding..' : 'Add Name'}}</Button>
            </div>
     </Modal>    

     <!-- Edit --> 

     <Modal v-model="editModal" title="Edit tag" :mask-closable= "false" 
     :closable= "false">
            <Input v-model="edit_data.name"  placeholder="Edit tag name"  
            />

            <div slot="footer">
                <Button type="default" @click="editModal= 
                false">Cancel</Button>
                <Button type="primary" @click="editData" 
                :disabled="isAdding" :loading="isAdding">{{isAdding ? 
                'Editing..' : 'Edit Name'}}</Button>
            </div>
    </Modal>

    <!-- delete alert modal -->
            
    <Modal v-model="showDeleteModal" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete confirmation</span>
        </p>
        <div style="text-align:center">
            <p>Are you sure you want to delete tag?.</p>
            
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="isDeleting" 
            :disabled="isDeleting" @click="deleteName">Delete</Button>
        </div>
    </Modal> 


 </div>    
</template>



 <script> 

    export default {

       data(){
            return{
                data: {
                    name : ''
                },              
                addname : false,
                editModal : false,
                isAdding : false, 

                array: [],
                edit_data : {
                    name : ''
                },
                index : -1,
                showDeleteModal : false,
                isDeleting : false,
                deleteItem : {},
                deletingIndex : -1,
                
            }
    },



    methods: {

        async addData(){
             if(this.data.name.trim()=='') return this.e('Name is required !')
             const hi = await this.callApi('post','add_data',this.data)
             if(hi.status===201){
                 this.array.unshift(hi.data)
                 this.s('Name added successfully')
                 this.addname = false
                 this.data.name = ''
             }else{
                 if(hi.status==422){
                     if(hi.data.errors.name){
                           this.i(hi.data.errors.name[0])
                     }  
                 }else{
                     this.smr()
                 }
             }
        },

        async editData(){
            if(this.edit_data.name.trim()=='') return this.e('name is 
            required')
            const hi = await this.callApi('post', 'edit_data', 
             this.edit_data)
            if(hi.status===200){
                this.array[this.index].name = this.edit_data.name
                this.s('Name has been edited successfully!')
                this.editModal = false
            
            }else{
                if(hi.status==422){
                    if(hi.edit_data.errors.name){
                        this.e(hi.edit_data.errors.name[0])
                    }
                    
                }else{
                    this.smr()
                }
                
            }

        },

        showEditModal(item, index){
            let obj = {
                id : item.id, 
                name : item.name
            }
            this.edit_data = obj
            this.editModal = true
            this.index = index
        },

        async deleteName(){
            this.isDeleting = true
            const hi = await this.callApi('post', 'delete_data', 
            this.deleteItem)
            if(hi.status===200){
                this.array.splice(this.i,1)
                this.s('successfully Deleted')
            }else{
                this.smr()
            }
            this.isDeleting = false
            this.showDeleteModal = false
        },

        showDeletingModal(item, i){
             this.deleteItem = item
             this.i = i
             this.showDeleteModal= true
        }
        
    },



    async created(){
        const hi = await this.callApi('get','get_data')
        if(hi.status===200){
            this.array = hi.data
        }else{
            this.smr()
        }    

      }
  }

</script>



<style scoped>

  .space{
       width:100%;
       height:5px;
   }
</style>

标签： laravelvue.js

laravel - csrf toke 没有在 laravel 8 中传递给 vuejs

问题描述

解决方案

推荐阅读