Axios不会在请求上传递标头

Question

我正在构建一个VueJS应用程序，并使用JSON web令牌作为身份验证系统。当我登录用户时，我使用localStorage存储令牌，并且工作正常。我检查了标题，它在“授权”参数中。

我通过axios.defaults.headers.common['授权']=localStorage.get项目（'令牌'）

我看到了标题，没关系。但是，当我对API中的受保护路由执行get请求时，返回“unauthorized”。但是，当我在请求中手动传递带有令牌的标头时，效果很好。

有人知道如何在执行某个请求时自动传递头吗？

Answer 1

拦截器，在每个请求中包含身份验证令牌作为授权标头：

axios.interceptors.request.use(
 function(config) {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
 },
 function(error) {
  return Promise.reject(error)
 }
)

您可以将其放置在主文件中，例如main。js

Answer 2

您可以使用axios.create创建一个新的axios实例，其中包含配置对象，包括标头。该配置将用于使用该实例进行的每个后续调用。

像这样的东西对我有用：

var App = Vue.component('app', {
  mounted () {
    this.response = null
    this.axiosInstance = axios.create({
      baseURL: 'http://localhost:5000/',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      }
    })
  },
  data () {
    return {
      response: this.response,
    }
  },
  methods: {
    login () {
      this.axiosInstance.post('login', {username: 'test', password: 'test'})
        .then(resp => {
          this.accessToken = resp.data.access_token
          this.axiosInstance.defaults.headers['Authorization'] = 'Bearer ' + this.accessToken
        })
        .catch(err => this.response = err.response.status + ' ' + err.response.statusText)
    },
    protected () {
      this.axiosInstance.get('protected')
        .then(resp => this.response = resp.data)
        .catch(err => this.response = err.response.status + ' ' + err.response.statusText)
    }
  },
  template: '<div><button @click="login">Connect</button><button @click="protected">Protected</button></div>'
})

Answer 3

试试这个...

//in get request
const auth = {
        headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
    }

axios.get('http://yourapi.com',auth).then(result => { 
 console.log(result.data)
})

//in post request
const auth = {
        headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
    }
 //note:auth will be 3rd parameter in post request
axios.post('http://yourapi.com',{somekey:'some value'},auth).then(result => { 
 console.log(result.data)
})