授权 header 不适用于 http GET 请求

Question

我在我的项目中使用 VueSession。我创建了一个登录组件，并将数据传递到我的后端（Django，returns JWT 令牌）。这是我的问题。我的登录工作正常，它是 returns JWT，但是当我想从其他端点获取数据时，我收到错误 401 (Authentication credentials were not provided)。当我在终端中使用 curl 时，一切正常。

curl -X POST -d "username=test&password=test" http://localhost:8000/api/token/auth/ 它 returns 令牌

curl -H "Authorization: JWT <my_token>" http://localhost:8000/protected-url/ 它 returns 来自网站的数据

这是我在我的 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>

当然我在 main.js

中设置了 VueSession 和 VueResource

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

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

Answer 1

编辑

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

和

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

希望对您有所帮助

Answer 2

您实际上并没有将 jwt 令牌存储在浏览器的任何位置（使用 cookie 或 localStorage）。因此，Vue 仅在您请求 jwt 令牌的页面运行时（在单页应用程序的意义上）在内存中具有令牌。根据 github docs of VueSession 将令牌存储在浏览器中的选项默认情况下为 false。只需像这样将其设置为真：

#main.js

var options = {
  persist: true
}

Vue.use(VueSession, options)

我个人不使用这个库。我通常使用 axios、Vuex 和 localStorage 从头开始。真的不难，模式描述的很好here.

Answer 3

问题出在这一行 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
}

现在可以使用了。

授权 header 不适用于 http GET 请求

Authorization header doesn't work with http GET requests

javascript

vue.js

vue-resource