使用axios发送不记名令牌

axios.post的第二个参数是data(不是config)。config是第三个参数。详细信息请参见:https://github.com/mzabriskie/axios#axiosposturl-data-config

const config = {
headers: { Authorization: `Bearer ${token}` }
};


const bodyParameters = {
key: "value"
};


Axios.post(
'http://localhost:8000/api/v1/get_token_payloads',
bodyParameters,
config
).then(console.log).catch(console.log);

第一个参数是URL 第二个是随请求发送的JSON主体 第三个参数是头(以及其他内容)。这也是JSON。

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

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

一些API要求承载被写成承载，所以你可以这样做:

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

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

您可以一次创建配置，然后在任何地方使用它。

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


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

如果你想在头中传递令牌后的一些数据，那么试试这段代码

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

通过使用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);
}
);

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

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

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

"axios": "^0.19.0",

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

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

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

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

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

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

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")

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

如果你发送一个带有空数据的post请求，请记住始终将第二个参数设置为空对象或空字符串，如下例所示。例句:axios。Post ('your-end-point-url-here'， "， config)

如果你不设置它，axios会假设你传递的第二个参数是一个formData

const config = {
headers: { Authorization: `Bearer ${storage.getToken()}` }
};
axios
.post('http://localhost:8000/api/v1/get_token_payloads', {}, config)
.then(({ data: isData }) => {
console.log(isData);
})
.catch(error => {
console.log(error);
});

你可以这样配置头文件:

const headers = {"Content-Type": "text/plain", "x-access-token": token}

你可以在axios中使用拦截器:

axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

更多信息你可以在这里找到:https://axios-http.com/docs/interceptors

你必须为post请求提到第二个参数身体，即使它是空的，尝试这样做:

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