如何在react.js中对axios使用令牌授权

Question

我在react.js中有这个函数，它应该使用令牌访问django rest框架:

getAll(token) {
axios.defaults.headers.common['Authorization'] = "Token " + token
return axios.get('http://localhost:8000/api/todos/');

我一直得到:

GET http://localhost:8000/api/todos/401(未经授权)

我试着在失眠上调用http请求，一切似乎都很好。失眠的成功curl请求是

curl --request GET 
--url http://127.0.0.1:8000/api/todos 
--header 'Authorization: Token 9a60ef4a5fbaab1b0fa9c3e8e8a5626b757e148d' 
--header 'Content-Type: application/json' 
--cookie csrftoken=MtpItNeHebjs7OaAfTTJBO3x4ezh5FfnVg1mNjOuNTy1piK9DXxSusb4oxW2qy1e

我如何在react.js中使用axios实现这个令牌请求

Answer 1

我想问题可能是

"Token " + token

我认为其他API正在寻找一个承载令牌作为授权，所以你可能想使用

axios.defaults.headers.common['Authorization'] = "Bearer " + token

Answer 2

是的，Mandip Giri的答案行得通。

虽然为了方便起见，我建议创建文件src/utility/axiosInstance.js或类似的内容，如:

import axios from 'axios';
export const axiosInstance = axios.create({
baseURL: 'https://example.com',
});
export const setToken = (token) => {
const auth = `Bearer ${token}`;
axiosInstance.defaults.headers.common['Authorization'] = auth;
};

然后将axiosInstance和setToken方法导入到您需要的任何组件中，并根据需求使用。