Как аутентифицировать Vue.js / Axios запрос API-маршрута в Laravel

Question

Я в Ларавеле 5.6. У меня есть все мои API-маршруты, построенные и правильно отвечающие на запросы от моего REST-клиента (Paw). Я пытаюсь создать простой интерфейс для доступа к этим маршрутам.

Я пытаюсь использовать как можно больше встроенных функций Laravel, поэтому я использую Axios для вызова этих маршрутов из шаблона блейда с помощью Vue.js. Это работает, если я отключаю промежуточное ПО аутентификации на тестовом маршруте, но я получаю 401 ошибок на консоли, когда промежуточное ПО аутентификации включено для маршрута.

Проблема кажется достаточно очевидной ... Страж auth:api на моих /api маршрутах хочет видеть в заголовке токен oauth, но когда я захожу с веб-страницы, он выполняет аутентификацию сеанса. Я предполагаю, что есть простой способ решить эту проблему без подмены запроса токена oauth в веб-интерфейсе, верно? Нужно ли как-то передавать маркер сеанса в моем запросе с Axios? И, если это так, мне также нужно изменить auth:api в моем файле API-маршрутов?

Answer 1

Возможно, вы захотите использовать Larvel Passport или механизм аутентификации JWT для получения токена Authorization.

Видя, как вы используете axios, добавьте перехватчик запросов, чтобы прикрепить маркер доступа к каждому запросу после успешной аутентификации. Простой пример:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // assume your access token is stored in local storage 
    // (it should really be somewhere more secure but I digress for simplicity)
    let token = localStorage.getItem('access_token')
    if (token) {
       config.headers['Authorization'] = `Bearer ${token}`
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

Answer 2

Я решил это! Я немного смущен, потому что ответ был на самом деле в документах Laravel, но я скажу, что попробовал это, прежде чем опубликовать вопрос здесь, и он не работал. Возможно, что-то еще было сломано в то время.

По документам Laravel :

Все, что вам нужно сделать, это добавить промежуточное программное обеспечение CreateFreshApiToken к вашему web группа промежуточного программного обеспечения в вашем app/Http/Kernel.php файле:

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

Это промежуточное программное обеспечение для паспорта будет прикреплять laravel_token cookie к вашему исходящие ответы. Этот файл cookie содержит зашифрованный файл JWT, который Паспорт будет использовать для аутентификации запросов API из вашего JavaScript приложение. Теперь вы можете делать запросы к API вашего приложения без явной передачи токена доступа ...

Answer 3

Да, вам нужен токен! и вы должны отправить его вручную в приложение внешнего интерфейса, а затем просто добавить его в заголовок

axios.defaults.headers.common['X-CSRF-TOKEN'] = 
document.querySelector('meta[name="csrf-token"]').getAttribute('content');

А если вам нужен самый простой способ, взгляните на это: Laravel Passport .