各位亲们！你们是不是都好奇过，咱们上网时总会碰到 cookie、session 和 token 这几个神奇玩意儿是干啥子的？今天我就要给大伙儿讲明白这个事儿！
先说说cookie，它就像个小快递员似的，每次我们上网页时它都会飞快地给你传送一些参数到后台去。但你得知道，cookie谁都能看到，保护隐私性最差了！而且它还有限制，最大只允许4kb这么大。不过别担心，cookie是储存在电脑里的。
接下来说那个神秘的“session”。它可潜伏在服务器里头！服务器会给内存开辟一块地儿，专管存数据。别忘了，它还有个特殊的名字，叫做“session ID”，这个东西会跟cookie一起走，来到服务器那里后，就找那个对应的session文件。
来聊聊你知道的那个token！其实这是个服务器搞出来的玩意儿。当你成功登入后，服务器就会给你一串字符作为token。这个东西很安全！
别忘了，这些玩意儿都可能会被CRSF攻击！咱可得当心点儿。好在现在有axios拦截器帮咱们对付！在我发出请求前，它会先搞定，给token安个家——就放在名叫key的地方，再连同其他信息装进请求头。这个key是后台和前台商量好了的！因此，每次我求助，请求头肯定带着token传送过去，后台就能验明正身啦～
import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;
let token = localStorage.getItem('token')
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
//console.log(config)
if(config.method==='post'){
config.data=qs.stringify({
token:token,
...config.data
})
}else if(config.method==='get'){
config.params={
token:token,
...config.params
}
}
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
class http{
static get(url,params){
return axios.get(url,params)
}
static post(url,params){
return axios.post(url,params)
}
}
export default http;
说起axios，真的超牛的！官网上教你俩设置拦截器的方法。第1招，就是先去本地存储那儿找找以前保存的那啥token，再在拦截器里面[…]给它们串成一坨儿；第2招？那简直太简单了，直接修改一下默认的全局配置就好！
今天我来讲讲Vue里怎么设置axios拦截器，让它可以接受只带token的请求包。希望能帮到大伙儿！有啥不明白的就直接给我留言！我会尽快回答你们的问题。再次感谢大家对我们网站的厚爱！
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
你们懂不懂cookie, session 和 token？快来评论里说说你知道啥！顺便给我点个赞~今天咱们聊了聊这三样东西的重要性。它们可是网上的守护者，保护咱们不受黑客侵害。希望看了这篇文章，你们也能更明白些。别忘了跟我留言互动！
// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
//这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中
config.headers['Authorization'] = token;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
评论0