Question

在我的反应应用程序中，我正在使用axios来执行REST api请求。

但它无法使用请求发送授权标头。

这是我的代码：

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.post的第二个参数是data（不是config）。 config是第三个参数。有关详细信息，请参阅此处：https://github.com/mzabriskie/axios#axiosposturl-data-config

Answer 3

这是在axios中设置授权令牌的独特方法。为每个axios调用设置配置不是一个好主意，您可以通过以下方式更改默认的Authorization令牌：

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

修改

某些API要求将Bearer编写为Bearer，因此您可以这样做：

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

现在，您无需为每个API调用设置配置。现在，将授权令牌设置为每个axios调用。

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

使用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 6

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

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 7

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

这里的问题是当传递没有数据的标头时，标头的配置将在有效载荷数据中，所以我需要传递 null 而不是数据，然后设置标头的配置。

inputChannel.value = "I[1;2]"

Answer 8

这也是我也面临的问题。您传递的令牌不正确。

只需对令牌进行硬编码并通过，您将获得正确的响应。但是，如果令牌未在单引号''中传递，则它肯定会失败。它必须采用“授权”格式：“ Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ”，在此位置必须非常重要，并且在单引号内也必须很重要。

       var token = 'YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ';

var headers = {
            'Authorization': 'Bearer '+ token,
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
        }

IMP：上面的代码将起作用，但是如果您发布类似的内容：

“授权”：“承载者” + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ失败

或-----下面的代码也将失败，希望您理解基本区别

var令牌= YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
            'Authorization': 'Bearer '+ token,
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
        }

Answer 9

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

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

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

"axios": "^0.19.0",

Answer 10

我使用一个单独的文件来初始化 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 });
};

Answer 11

有很多好的解决方案，但我使用这个

let token=localStorage.getItem("token");

var myAxios=axios.create({
  baseURL: 'https://localhost:5001',
  timeout: 700,
  headers: {'Authorization': `bearer ${token}`}
});

export default myAxios;

然后我将 myaxios 导入到我的文件中

myAxios.get("sth")

Answer 12

// usetoken 是钩子，我疯了

export const useToken = () => {
     return JSON.parse(localStorage.getItem('user')).token || ''
}
const token = useToken();



const axiosIntance = axios.create({
    baseURL: api,
    headers: {
        'Authorization':`Bearer ${token}`
    }
});

axiosIntance.interceptors.request.use((req) => {
    if(token){
        req.headers.Authorization = `Bearer ${token}`;
    }
    return req;
})

Answer 13

axios本身具有interceptors两个有用的“方法”，它们只是请求和响应之间的中间件。因此，如果您要在每个请求上发送令牌。使用interceptor.request。

我制作了一个可以帮助您的软件包：

$ npm i axios-es6-class

现在您可以将axios用作类

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

我的意思是middleware的实现取决于您，或者您是否愿意创建自己的axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a 它是来自的中等帖子

使用axios发送持有者令牌

13 个答案: