时间戳

首页 > 解决方案 > Laravel、Vuejs、axios 获取登录用户的帖子

laravel - Laravel、Vuejs、axios 获取登录用户的帖子

问题描述

我正在尝试通过 axios 将登录用户的任务放入 vuejs 组件中，但我不断收到

POST http://localhost:8000/api/tasks 401（未经授权）

这是来自 api.php 的路线：

Route::group(['middleware' => 'auth:api'], function() {

    Route::prefix('tasks')->group(function() {
        Route::post('/', 'TasksController@index');
        Route::post('{id}', 'TasksController@single');
        Route::post('new', 'TasksController@new');
    });

});

的index功能TasksController：

public function index(Request $request) {

    if ( $request->ajax() ) {
        return auth()->user()->tasks()->orderBy('name', 'ASC')->get();
    }

    return view('tasks.index')
                ->with('tasks', auth()->user()->tasks()->orderBy('name', 'ASC')->get());

}

和 vuejs 组件：

<template>
    <div>
        <ul>
            <li v-for="task in tasks" v-bind:key="task.id">{{ task.name }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tasks: [],
            }
        },

        created() {
            this.fetchTasks();
        },

        methods: {

            fetchTasks() {
                axios({
                    url: 'api/tasks',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).then(res => {
                    this.tasks = res.data;
                });
            }

        }
    }
</script>

标签： laravelvue.jsauthenticationpostaxios

解决方案

您正在使用auth:api中间件，默认情况下这是基于令牌的身份验证，但我没有看到您添加任何Bearer令牌标头。

我知道有两种可能的解决方案。

  1. 如果您想继续使用auth:api中间件，请请求一个 api 令牌并在您的请求中使用它（https://laravel.com/docs/6.x/api-authentication），但最好切换到Laravel Passport
  2. 就我个人而言，我会为此使用网络身份验证（基于会话），在您登录后将添加一个会话令牌，您实际上不需要做太多事情，因为之后它将添加到所有调用中

推荐阅读