Javascript 授权标头不存在'；无法处理http GET请求

我正在我的项目中使用VueSession。我创建了一个登录组件，并将数据传递到后端（Django，返回JWT令牌）。这是我的问题。我的登录工作正常，它返回JWT，但当我想从其他端点获取数据时，出现错误401（

未提供身份验证凭据

）。当我在终端中使用curl时，一切正常

curl-X POST-d“用户名=测试&密码=测试”http://localhost:8000/api/token/auth/

它返回令牌

curl-H“授权：JWT”http://localhost:8000/protected-网址/

它从网站返回数据

以下是我在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>

<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)

编辑

与

希望它能帮助您编辑

与

---

希望它能帮助您

您不会在浏览器中的任何位置存储jwt令牌（使用cookie或localStorage）。因此，Vue内存中只有您请求jwt令牌的页面运行时（在单页应用程序的意义上）的令牌。根据默认设置，在浏览器中存储令牌的选项为false。只需将其设置为true，如下所示：

#main.js

var options = {
  persist: true
}

Vue.use(VueSession, options)

---

我个人不使用这个图书馆。我通常使用axios、Vuex和localStorage从头开始。其实并不难，模式描述得很好。

您实际上并没有将jwt令牌存储在浏览器中的任何位置（使用cookie或localStorage）。因此，Vue内存中只有您请求jwt令牌的页面运行时（在单页应用程序的意义上）的令牌。根据默认设置，在浏览器中存储令牌的选项为false。只需将其设置为true，如下所示：

#main.js

var options = {
  persist: true
}

Vue.use(VueSession, options)

---

我个人不使用这个图书馆。我通常使用axios、Vuex和localStorage从头开始。其实并不难，模式描述得很好。

问题在于这一行

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
}

---

现在它开始工作了。

问题出在这一行

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
}

---

现在它开始工作了。

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

在JWT之后缺少一个空格。你想过使用axios库吗？@PatrickCyiza是的，我尝试过，但出现了相同的错误。

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

在JWT之后缺少一个空格。你想过使用axios库吗？@PatrickCyiza是的，我尝试过，但出现了相同的错误。谢谢帮助，但在刷新页面时它只工作一次，我得到了相同的错误。谢谢帮助，但在刷新页面时它只工作一次。你应该尝试遵循我在回答中链接的备选解决方案。如果您已经熟悉vuex，您将在不到半小时内启动并运行。您应该尝试遵循我在回答中链接的alternatif解决方案。如果您已经熟悉vuex，您将在不到半小时内启动并运行。