使用axios发送持有者令牌

Question

在我的反应应用程序中,我使用axios来执行REST api请求.

但它无法使用请求发送Authorization标头.

这是我的代码:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

这里的validToken()方法只是从浏览器存储中返回令牌.

所有请求都有500错误回复说

无法从请求中解析令牌

从后端.

如何使用每个请求发送授权标头？你会推荐其他任何反应模块吗？

Answer 1

var config = {
    headers: {'Authorization': "bearer " + token}
};

var bodyParameters = {
   key: "value"
}

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then((response) => {
  console.log(response)
}).catch((error) => {
  console.log(error)
});

第一个参数是URL.
第二个是将根据您的请求发送的JSON正文.
第三个参数是标题(以及其他内容).这也是JSON.

Answer 2

以下是在axios中设置授权令牌的独特方法.将配置设置为每个axios调用都不是一个好主意,您可以通过以下方式更改默认授权令牌:

const axios = require('axios');
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

现在您不需要为每个API调用设置配置.现在授权令牌被设置为每个axios调用.

Answer 3

第二个参数axios.post是data(不config).config是第三个参数.有关详细信息,请参阅此处:https://github.com/mzabriskie/axios#axiosposturl-data-config

Answer 4

您可以创建一次配置并在任何地方使用它.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

Answer 5

以防万一有人遇到同样的问题。

这里的问题是，当传递没有数据的标头时，标头的配置将位于有效负载数据中，因此我需要传递 null 而不是数据，然后设置标头的配置。

const config = {
         headers: {
             "Content-type": "application/json",
              "Authorization": `Bearer ${Cookies.get("jwt")}`,
         },
    };    
axios.get(`${BASE_URL}`, null, config)

Answer 6

通过使用Axios拦截器：

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

Answer 7

这有效，我只需要在我的中设置一次令牌app.js：

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

然后我可以在我的组件中发出请求而无需再次设置标头。

"axios": "^0.19.0",

Answer 8

如果要在标题中传递令牌后想要一些数据，请尝试以下代码

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});

Answer 9

我使用一个单独的文件来初始化 axios 实例，同时向其中添加拦截器。然后在每次调用中，拦截器都会为我将令牌添加到请求标头中。

import axios from 'axios';
import { getToken } from '../hooks/useToken';

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
});

axiosInstance.interceptors.request.use(
  (config) => {
    const token = getToken();
    const auth = token ? `Bearer ${token}` : '';
    config.headers.common['Authorization'] = auth;
    return config;
  },
  (error) => Promise.reject(error),
);

export default axiosInstance;

这是我在服务文件中使用它的方法。

import { CancelToken } from 'axios';
import { ToolResponse } from '../types/Tool';
import axiosInstance from './axios';

export const getTools = (cancelToken: CancelToken): Promise<ToolResponse> => {
  return axiosInstance.get('tool', { cancelToken });
};