laravel - vue请求的取消删除方法出现401错误？

Question

我制作@vue/cli 4.0.5 应用程序，从 Laravel 7 后端 REST API 读取数据，并在前端部分使用软删除功能我有 2 种方法 1）删除行 2）取消删除行 对这两种情况进行类似的实现我得到 401 错误在 2) 的情况下，我找不到原因。

1）删除行（工作正常）：

removeTask(id, task_name, soft_deletion/*, index*/) {
    console.log('removeTask soft_deletion::')
    console.log(soft_deletion)

    let confirm_message= "Do you want to delete permanently " + " '" + task_name + "' task ? It can not be restored !"
    if (soft_deletion) {
        confirm_message= "Do you want to mark for deletion " + " '" + task_name +
            "' task ? It would be unavailable in the app, but can be restored(undeleted) OR deleted permanently !"
    }

    if (!confirm(confirm_message)) {
        return
    }

    let credentials= this.credentialsConfig
    credentials.headers.Authorization = 'Bearer ' + this.currentLoggedUserToken
    console.log('removeTask credentials::')
    console.log(credentials)

    axios.delete(this.apiUrl + '/adminarea/tasks/' + id, credentials).then((/*response*/) => {
        this.loadTasks()
        this.showPopupMessage('Tasks Editor', 'Task was '+(soft_deletion ? "softly" : "permanently")+' deleted successfully !'+( soft_deletion ?
            "But you can restore it or delete permanently" : "" ), 'success')
    }).catch((error) => {
        console.error(error)
        this.showPopupMessage('Tasks Editor', 'Error deleting task : ' + error.response.data.message, 'error')
    })

}, //removeTask(id, task_name, soft_deletion, index) {

我在控制台中看到： https ://imgur.com/a/e1vruhv

2）取消删除行（引发401错误）

unremoveTask(id, task_name/*, index*/) {
    console.log('unremoveTask id::')
    console.log(id)

    if (!confirm("Do you want to restore(undelete) " + " '" + task_name + "' task ?")) {
        return
    }

    let credentials= this.credentialsConfig
    credentials.headers.Authorization = 'Bearer ' + this.currentLoggedUserToken

    console.log('unremoveTask credentials::')
    console.log(credentials)

    axios.put(this.apiUrl + '/adminarea/tasks/' + id+"/unremove", credentials).then((/*response*/) => {
        this.loadTasks()
        this.showPopupMessage('Tasks Editor', 'Task was deleted successfully', 'success')
    }).catch((error) => {
        console.error(error)
        this.showPopupMessage('Tasks Editor', 'Error deleting task !', 'error')
    })

}, //unremoveTask(id, task_name, index) {

我在控制台中看到： https ://imgur.com/a/YJ5DKWM

我不明白为什么2）中的错误？credentialsConfig 如果在设置文件 src/app.settings.js 中：

export const settingCredentialsConfig = {
    withCredentials:true,
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials':true
    }
}

在我的 vue 文件中：

<script>
    import {settingCredentialsConfig} from '@/app.settings.js'
    ...


data() {
    return {
    credentialsConfig: settingCredentialsConfig,
    ...

任何时候我得到 credentialsConfig var 的副本并向其中添加令牌。在控制台中，我看到了有效的令牌标头。授权。

在我的 latavel 应用程序的 /routes/api.php 中，我定义了：

Route::group(['middleware' => 'jwt.auth',  'prefix' => 'adminarea', 'as' => 'adminarea.'], function ($router) {
    Route::resource('tasks', 'API\Admin\TaskController');
    Route::group([ 'prefix' => 'tasks'], function ($router) {
        Route::put('/{id}/unremove', 'API\Admin\TaskController@unremove_task');

如果取消删除 url 无效，我会收到 404 错误...

为什么会出现错误以及如何修复？

更新： 尝试调试这个问题，我使用克隆函数来创建凭据 var，我在请求中使用它。

getClone: function (obj) {
    let copy = JSON.parse(JSON.stringify(obj))
    return copy
},

我还添加了 2 个变量，其中我分配了 authorization_1 和 authorization_2 ro

                let credentials= this.getClone(this.credentialsConfig)
                credentials.headers.Authorization = 'Bearer ' + this.currentLoggedUserToken
                this.authorization_1= credentials.headers.Authorization
                console.log('removeTask credentials::')
                console.log(credentials)
                axios.delete(this.apiUrl + '/adminarea/tasks/' + id, credentials).then((/*response*/) => {
and

                let credentials= this.getClone(this.credentialsConfig)
                credentials.headers.Authorization = 'Bearer ' + this.currentLoggedUserToken
                this.authorization_2= credentials.headers.Authorization
                console.log('unremoveTask credentials::')
                console.log(credentials)
                axios.put(this.apiUrl + '/adminarea/tasks/' + id+"/unremove", credentials).then((/*response*/) => {

并在页面上输出这些 authorization_1 和 authorization_2 变量我可以比较它们的内容并看到它们具有相同的值，例如

‘Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vbG9jYWwtY3Rhc2tzLWFwaS5jb20vYXBpL2xvZ2luIiwiaWF0IjoxNTkwNDE3NzcxLCJleHAiOjE1OTA0MjEzNzEsIm5iZiI6MTU5MDQxNzc3MSwianRpIjoiSHRjQmNPbUQwbjhKVHlqbyIsInN1YiI6MSwicHJ2IjoiODdlMGFmMWVmOWZkMTU4MTJmZGVjOTcxNTNhMTRlMGIwNDc1NDZhYSJ9.A3lZqX2hEaYGYuBoh9rDzjcyg4jEVkBXANRhAiUyZ0c’

我只是想通过分配 credentials.headers.Authorization 来检查是否没有剪切/修改...

任何想法为什么会出错？

谢谢！

标签： laravelvuejs2