vue-ресурс не передает токен в заголовках запроса

Question

Я новичок в Vuejs 2, в настоящее время использую vue-resource для получения данных с сервера. Однако мне понадобится токен, переданный в заголовке запроса одновременно, чтобы получить данные с сервера.

Так что проблема в том, что я не могу получить данные, потому что токен не передается в заголовок запроса, используя vue-resource.

Вот метод, который использует перехватчик vue-resource (для передачи токена) для перехвата запроса GET:

test () {
  this.$http.interceptors.push((request) => {
    var accessToken = window.localStorage.getItem('access_token')
    request.headers.set('x-access-token', accessToken)
    return request
  })
  this.$http.get(staffUrl)
   .then(response => {
     console.log(response)
   }, (response) => {
     console.log(response)
   })
}

Документация для vue-ресурса, HTTP: https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

Когда я пытаюсь получить данные, я получаю сообщение об ошибке 403 (запрещено) и после проверки заголовков запросов в инструментах разработки, я также не могу найти токен в заголовках запросов.

Пожалуйста, скажите мне, где я ошибся, потому что я новичок в этом, поэтому я ценю любую помощь! Спасибо!

Answer 1

Установка перехватчиков внутри компонента с использованием $http не работает или, по крайней мере, в моем тестировании не работает. Если вы изучаете / журнал this.$http.interceptors сразу после вашего толчка в test Метод, вы заметите, что перехватчик не был добавлен.

Если вы добавите перехватчик до того, как создадите экземпляр Vue, перехватчик будет добавлен правильно, а заголовок будет добавлен к запросу.

Vue.http.interceptors.push((request, next) => {
  var accessToken = "xyxyxyx"
  request.headers.set('x-access-token', accessToken)
  next()
})

new Vue({...})

Вот тестовый код, который я использовал.

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

Answer 2

Пожалуйста, пройдите этот код

import vueResource from "vue-resource";
import { LocalStorage } from 'quasar'

export default ({
    app,
    router,
    Vue
}) => {
    Vue.use(vueResource);

    const apiHost = "http://192.168.4.205:8091/";

    Vue.http.options.root = apiHost;
    Vue.http.headers.common["content-type"] = "application/json";
    Vue.http.headers.common["Authorization"] = "Bearer " + LocalStorage.get.item("a_t");



    Vue.http.interceptors.push(function(request, next) {
        console.log("interceptors", request);
        next(function(response) {

        });
    });
}