Question

我正在构建一个VueJS应用程序，我正在使用JSON Web令牌作为我的auth系统。当我记录用户时，我使用localStorage存储令牌并且工作正常。我检查了标题，它位于“授权”参数中。

我通过了axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')

我看到了标题，没关系。但是当我在API中对受保护路由执行get请求时，返回“未授权”。但是当我在请求中手动传递带有令牌的标头时，工作正常。

有人知道在执行某些请求时如何自动传递标题？

Answer 1

试试这个..

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

Answer 2

您可以使用axios.create创建一个config object的新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

拦截器，它在每个请求中都包含您的auth令牌作为授权标头：

int totalBytes = ulTag.getMaxTransceiveLength() + 3;
int totalPages =  totalBytes / ulTag.PAGE_SIZE;

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

Answer 4

检查服务器是否从“授权”标头中获取令牌
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
如果第2号有效，那么即使刷新了网络，您可能仍要执行api，然后执行以下操作：

axios.interceptors.request.use(function (config) {
  const token = 'Bearer ' + localStorage.getItem('token');
  config.headers.Authorization = `Bearer ${token}`;

  return config;
});

Axios没有在请求上传递标头

4 个答案: