如何使用 vue axios 在 laravel 中解决 401 未授权响应

Posted 2023-02-22

【中文标题】如何使用 vue axios 在 laravel 中解决 401 未授权响应

【英文标题】：How to resolve 401 unauthorized response in laravel using vue axios

【发布时间】：2020-01-06 07:13:35

【问题描述】：

我正在使用 Vue js 以及 vue axios 和 vue 路由器在 laravel 中创建一个简单的 CRUD 操作。 路由按预期工作正常，但问题是当我使用 axios 保存数据时，我得到的响应是 401 未授权。 我已经在 web.php 中像这样保护了我的路由

Route::get('/any', function () 
    return view('posts');
  )->where('any', '.*')->middleware(['auth']);

在 api.php 我有这样的路由。

Route::post('/quiz/create-quiz-category', 'QuizCategoryController@store')->middleware(['auth']);

我目前正在使用 laravel 默认身份验证系统。 下面是我的vue组件脚本代码。

this.axios.post(uri, post: this.post, 
          headers: 
              'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
              'Accept' : 'application/json'
          
        ).then((response) => 
        // this.$router.push(name: 'home');
        );

如果有人告诉我代码有什么问题，并且我目前没有使用任何护照或 jwt，我将不胜感激。

谢谢。

【问题讨论】：

this one.的可能重复

@BenjaminBeganović 我已经尝试了上述票务解决方案，但现在由于 404 错误，它的 simplet 没有打开页面。

从 api 中删除 /。把'测验/创建测验类别'

Auth 中间件需要 Authorization 标头中存在令牌，并且 api.php 中的中间件将是 auth.api

谢谢，我会尽最大努力让你们知道。

【参考方案1】：

api_token: this.user.api_token

         axios.post("http://foo",
         headers:  'Authorization' : 'Bearer '+ api_token)
         .then(response => 
                    //action
                )

链接：https://forum.vuejs.org/t/401-unauthorized-vuejs-laravel-and-passport/59770

或

       postComment() 
      axios.post('/api/posts/'+this.post.id+'/comment', 
        api_token: this.user.api_token,
        body: this.commentBox
      )

但请确保您拥有“user.api_token”