Как использовать аутентифицированный API с Axios

Question

Я пытаюсь создать приложение, используя Vue и Laravel. В настоящее время я использую паспортную аутентификацию в Laravel для аутентификации пользователя. Однако, когда я пытаюсь сделать пост-запрос от vue компонента, используя axio, я получаю 401 несанкционированный доступ, даже если я в данный момент вошел в систему.

Вот пример кода:

1. Получите запрос от vue компонента

    getEvents() {
      axios
        .get("/api/calendar")
        .then(resp => (this.events = resp.data.data))
        .catch(err => console.log(err.response.data));
    }

2. Laravel маршруты

Route::apiResource('/calendar', 'CalendarController')->middleware('auth:api');

3. Контроллер календаря, связанный с запросом get выше

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return CalendarResource::collection(Calendar::all());
    }

Я часами занимался этой проблемой, и все, что я обнаружил, просто не работает. Таким образом, любая помощь вообще крайне необходима.

edit:

Дополнительные детали

Я использую Laravel 5.8 +0,35.

Что касается паспорта, я использую эту документацию laravel .com / docs / 5.8 / passport и следовал инструкциям по быстрому запуску и развертыванию внешнего интерфейса.

second edit :

Полный код на github

Вот полный проект на github incase, который может помочь. https://github.com/CMHayden/akal.app/tree/feature/Calendar

Answer 1

Я внес некоторые изменения в ваш проект, вот репозиторий github https://github.com/AzafoCossa/ProFix, надеюсь, он работает.

Откройте AuthServiceProvider. php файл, добавьте Passport::routes() в boot(), откройте файл auth. php, обновите «api» guard с 'driver'=>'token' до 'driver'=>'passport' и, наконец, откройте файл Kernel. php, добавьте промежуточное ПО: 'web' => [ // Other middleware... \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class, ],

Answer 2

Если вы храните токен авторизации в cook ie, вы можете сделать следующее:

let token = cookie.get("token");
//send Authorization token with each request
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
axios
     .get("/api/calendar")
     .then(resp => console.log(resp.data))
     .catch(err => console.log(err))

Answer 3

Пожалуйста, подтвердите, если вы установили значение meta для csrf token в записи html или blade file

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

Также заголовок для axios в bootstrap.js файл вроде этого

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Answer 4

Попробуйте добавить правильное промежуточное программное обеспечение вместе с другими предложениями здесь

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

https://laravel.com/docs/5.8/passport#consuming -your-api-with- javascript

Также вы не должны нуждаться в этих строках, которые есть в bootstrap или компоненте календаря. Паспорт позаботится об этом для вас, используя только куки http.

//send Authorization token with each request
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;