Laravel + Vue + JWT: как добавить Authorization header?

Question

[mesc]

Добрый день!
Вчера решил подключить к Laravel JWT и переписать авторизацию. До этого использовалась нативная авторизация "из коробки".
Итак, есть роуты:

Route::get('/', ['uses' => 'AuthController@index']);
Route::post('/login', ['uses' => 'AuthController@login']);
Route::get('logout', 'AuthController@logout');
Route::get('/ap', ['uses' => 'APController@index']);

Первый выводит форму входа, вот код Vue, который "обрабатывает" ее:

export default {
        data () {
            return {
                login: '',
                password: ''
            }
        },
        methods: {
            auth () {
                axios.post('/api/login', { login: this.login, password: this.password })
                    .then(function (response) {
                        if (response.data.success) {
                            Cookies.set('Token', 'Bearer ' + response.data.data.token);
                            axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.data.token;
                            console.log('Токен выдан')
                        }
                        console.log(response.data.data.token);
                    })
            }
        }
    }

Т.е. я сохраняю JWT в cookies. Авторизация проходит, кука сохраняется. Теперь, после авторизации я хочу перейти по адресу mysite/ap (последний роут, метод GET). Код метода index:

try {
            if (! $user = JWTAuth::parseToken()->authenticate()) {
                return response()->json(['user_not_found'], 404);
            }
        } catch (Tymon\JWTAuth\Exceptions\TokenExpiredException $e) {
            return response()->json(['token_expired'], $e->getStatusCode());
        } catch (Tymon\JWTAuth\Exceptions\TokenInvalidException $e) {
            return response()->json(['token_invalid'], $e->getStatusCode());
        } catch (Tymon\JWTAuth\Exceptions\JWTException $e) {
            return response()->json(['token_absent'], $e->getStatusCode());
        }
        
        return response()->json(compact('user'));

Однако я получаю JWTException
The token could not be parsed from the request
В мануалах сказано, что я должен передавать Authorization header при запросе вида "Authorization: Bearer + myToken". Добавил следующий код в resources\assets\js\app.js

import VueResource from 'vue-resource';
import Cookies from 'js-cookie';
Vue.use(VueResource);
Vue.http.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');

Пересобрал (npm run dev), однако header не вставляется и как результат - после успешной авторизации я не получаю доступ к части сайта, где требуется передать JWT по причине того, что я не могу вставить Authorization header, он не вставляется.
Поставил ModHeader для Chrome, прописал там header с токеном, выданным после авторизации - все работает.
И собственно вопрос: каким образом можно добавить Authorization header в GET-запрос? Что я делаю не так? :(
Заранее благодарен за ответы.

Comments

[mesc]

UPD:
Решил попробовать установить Header через middleware. Зарегистрировал все, как положено, протестировал. Вот код, который выполнит middleware после запроса:

public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->headers->add(['Test' => 'FooBar']);

        return $response;
    }

Все работает, DevTools показывает, что на мой Request был получен вместе с остальными Header "Test'. Проделываю то же самое, меняя код в middleware так, чтобы он обрабатывался ДО запроса (как в документации написано):

public function handle($request, Closure $next)
    {
        $request->headers->add(['Test' => 'FooBar']);

        return $next($request);
    }

И это не работает. В Request Headers нет хидера Test.
Прочитал, что нужно внести правки в .htaccess, но необходимые строки уже есть в этом файле в /public/.htaccess. Даже на nginx переключил OSPanel, все-равно Request уходит без кастомного хидера.

Answer 1

[Froks]

Используй лучше стандартный passport laravel, а не tymon сторонний

Answer 2

[HeyAway]

Два варианта:

В запрос:

axios({
        method: 'post', // Or GET
        url: this.$root.api.get_featured,
        headers: { 'Authorization': 'Bearer ' + this.$root.api.access_token } // Cookies.get('Token')
      })

Общий. После подключения axios, ставьте:

axios.defaults.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');

Оба варианта у меня исправно работают.

Comments

[mesc]

Спасибо за варианты, но это немного не то. Установка headers в axios у меня работает. Суть в том, что я после получения токена на главной странице, сохраняю его в cookies и тут же вручную меняю адрес на mysite/ap, на котором идет идет проверка, имеется ли токен или нет. Т.е. фактически я выполняю обычный GET-запрос из браузера, и он не выполняется по причине отсутствия Authorization Header. На странице авторизации после успешного входа, я получаю токен, сохраняю его в куках и выполняю написанную Вами команду:

axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.data.token;

и после нужный хидер появляется. Однако стоит обновить страницу или попытаться вручную перейти по другому адресу, хидер пропадает и я никак не могу заставить его тут "вернуться".

[HeyAway]

Если вам необходимо просто и всегда иметь токен в axios.defaults.headers.common['Authorization'], то вот, как вариант это решение:

В main.js - там, где создаете экземпляр Vue:

watch: {
    '$route': function(from, to) {
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');
    }
  },
  created () {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');
  }

Чуть подробнее:

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  directives: {infiniteScroll},
  watch: {
    '$route': function(from, to) {
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');
    }
  },
  created () {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');
  }
})

Таким образом, при любом изменении route - т.е, перехода по ссылкам, либо при обновлении страницы, ваш headers.common будет получать токен из кук. Но прошу заметить, это сработает, если вы подключаете axios в main.js, а не в компонентах.