Learn to use of tokens after learning the role of cookies, sessions, and tokens
cookie
Cookie is the lowest security and the size is limited, no more than 4kb, and its data is saved on the client
session
The session data is saved on the server, and space is opened in memory to store data. The session file name, the session ID, is stored in the cookie. After being transmitted to the server, the session file is matched on the server.
token
token is an algorithm on the server. If the login is successful, the server will generate a string according to the algorithm and pass the string back to the client. This string is token, with the highest security
All of the above may be attacked by CSRF
The axios interceptor will process the request before sending the request, put the token into the key and save it in the request header. This key is agreed upon by the front and backend. After this configuration, every time a request is sent, the request header will be sent to the background for verification.
Features of axios (official website)
- Supports browser and
- Support promise
- Ability to intercept requests and responses
- Ability to convert request and response data
- Cancel the request
- Automatically convert JSON data
- The browser side supports preventing CSRF (cross-site request forgery)
Method 1: When using axios request, we can first obtain the token we have stored in localStorage.
Then use […] to splice it in the interceptor
import axios from 'axios';
import qs from 'qs';
= .VUE_APP_BASE_API;
let token = ('token')
// Add a request interceptor
(function (config) {
// Do something before request is sent
//(config)
if(==='post'){
=({
token:token,
...
})
}else if(==='get'){
={
token:token,
...
}
}
return config;
}, function (error) {
// Do something with request error
return (error);
});
// Add a response interceptor
(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return (error);
});
class http{
static get(url,params){
return (url,params)
}
static post(url,params){
return (url,params)
}
}
export default http;
Method 2:
Axios modify the global default configuration:
= ''; ['Authorization'] = AUTH_TOKEN; ['Content-Type'] = 'application/x-www-form-urlencoded';
Axios configuration interceptor:
// Add a request interceptor(function (config) {
// Do something before request is sent
return config;
//This is often used with tokens, configure the token value into the tokenkey, and place the tokenkey in the request header['Authorization'] = token;
}, function (error) {
// Do something with request error
return (error);
});
// Add a response interceptor(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return (error);
});
These two methods allow us to splice tokens in the axios interceptor, instead of adding a token value for each request.
Summarize
The above is what the editor introduces to youVuemiddleaxiosHow to configure interceptors separatelytoken，Hope it will be helpful to everyone，If you have any questions, please leave me a message，The editor will reply to everyone in time。 Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!