Заголовок авторизации не работает с запросами http GET - PullRequest
Новая
       12

Заголовок авторизации не работает с запросами http GET

0 голосов
/ 02 мая 2018

Я использую VueSession в своем проекте. Я создал компонент входа в систему и передаю данные своему бэкэнду (Django, возвращает токен JWT). Здесь моя проблема. Мой логин работает нормально, он возвращает JWT, но когда я хочу получить данные с других конечных точек, я получаю ошибку 401 (Authentication credentials were not provided). Когда я использую curl в моем терминале, все работает нормально.

curl -X POST -d "username=test&password=test" http://localhost:8000/api/token/auth/ возвращает токен

curl -H "Authorization: JWT <my_token>" http://localhost:8000/protected-url/ и возвращает данные с сайта

Вот то, что я настроил в своем проекте Vue.

Login.vue

<script>
import Vue from 'vue'

export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    login: function (username, password) {
      let user_obj = {
        "username": username,
        "password": password
      }
      this.$http.post('http://192.168.1.151:8000/api/token/auth', user_obj)
      .then((response) => {
        console.log(response.data)
        this.$session.start()
        this.$session.set('jwt', response.data.token)
        Vue.http.headers.common['Authorization'] = 'JWT' + response.data.token

        // this.$router.push('/')

      })
      .catch((error_data) => {
        console.log(error_data)
      })
    }
  }
}
</script>

HereIWantUserGETRequest.vue

<script>
export default {
  data() {
    return {
      msg: "Welcome",
      my_list: []
    }
  },
  beforeCreate() {
    // IF SESSION DOESN'T EXIST
    if (!this.$session.exists()) {
      this.$router.push('/account/login')
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData: function() {
      this.$http.get('http://192.168.1.151:8000/api/user/data')
        .then((response) => {
          console.log(response.data)
          this.my_list = response.data
        })
        .catch((error_data) => {
          console.log(error_data)
        })
    }
  }
}
</script>

И, конечно, я настроил VueSession и VueResource в main.js 

import VueSession from 'vue-session'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.use(VueSession)

Ответы [ 3 ]

0 голосов
/ 03 мая 2018

Вы фактически не храните свой токен jwt где-либо в вашем браузере (с cookie или localStorage). Поэтому Vue имеет токен в памяти только для времени выполнения этой страницы (в смысле одностраничного приложения), в который вы запрашиваете свой токен jwt. Согласно github документам VueSession опция для хранения токен в вашем браузере по умолчанию ложен. Просто установите значение true, как это: 

#main.js

var options = {
  persist: true
}

Vue.use(VueSession, options)

Лично я не пользуюсь этой библиотекой. Я обычно делаю это с нуля, используя axios, Vuex и localStorage. Это на самом деле не так уж и сложно, шаблон описан довольно хорошо здесь .

0 голосов
/ 03 мая 2018

Проблема была с этой строкой Vue.http.headers.common['Authorization'] = 'JWT ' + response.data.token. Чтобы это исправить, мне нужно было сделать это в файле main.js: 

if (this.$session.exists()) {
      var token = this.$session.get('jwt')
      console.log(token)
      Vue.http.headers.common['Authorization'] = 'JWT ' + token
}

А теперь работает.

0 голосов
/ 02 мая 2018

Редактировать 

Vue.http.headers.common['Authorization'] = 'JWT' + response.data.token

с 

Vue.http.headers.common['Authorization'] = 'JWT ' + response.data.token

Надеюсь, это поможет вам

...