
react项目:react拦截器和token问题
发布日期:2021-05-04 18:19:00
浏览次数:10
分类:技术文章
本文共 1421 字,大约阅读时间需要 4 分钟。
登录获取token后,如何对后面的接口统一在请求头header里面设置token,让后面的请求header都带有token。
axios拦截器(interceptor)
作用:当一个请求发出的时候,会先流过 interceptors 的 request 部分,接着请求会发出,当接受到响应时,会先流过 interceptors 的 response 部分,最后返回。在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 //这里经常搭配token使用 let token = sessionStorage.getItem("token"); config.headers.Authorization = token; //将token放到请求头发给服务器 return config;}, function (error) { // 对请求错误做些什么 console.log("对请求错误做些什么"); return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) { // 对响应数据做点什么 let token = sessionStorage.getItem("token"); return response;}, function (error) { // 对响应错误做点什么 return Promise.reject(error);});
关于登录后的token获取。
reqLogin(name,password).then(response => { //获取 let token = response.data.data.token; console.log("token="+token); console.log('成功了', response.data); //保存 window.sessionStorage.setItem("token",token); const setAuthToken = token => { console.log(token); if(token){ axios.defaults.headers.common["token"] = token; }else{ delete axios.defaults.headers.common["token"];} } setAuthToken(token);
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.219.124.196]2025年03月19日 15时13分21秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Mybatis中的SQL语句等于、不等于和模糊查询的语法
2019-03-01
用xacro给自己的ROS小车编写模型
2019-03-01
使用 github 搜索
2019-03-01
.net core 中使用 EFcore做ORM
2019-03-01
那些用过一次就不会卸载的软件
2019-03-01
工具-snipate(截图)
2019-03-01
java有包名的类访问没有包名的类
2019-03-01
python中快速删除重复元素
2019-03-01
手绘导图版:深入解析机器学习在风控场景中的8大应用
2019-03-01
长期豪赌人工智能,Alphabet是怎样一步一步偷偷改变世界的?
2019-03-01
手把手教你用Python的NumPy包处理数据
2019-03-01
TIOBE 12月编程语言排行榜:Python有望第四次成为年度语言
2019-03-01
Python循环语句代码逐行详解:while、for、break和continue
2019-03-01
如何让图表更有说服力?6大准则和1个经典案例给你讲明白
2019-03-01
吐血整理:43种机器学习开源数据集(附地址/调用方法)
2019-03-01
linux sort与awk
2019-03-03
详细分析下用于交互的Scanner
2019-03-03
Java方法板块学习经验分享
2019-03-03
Kotlin学习之变量和函数的讲解
2019-03-03
Java--泛型(通配符、泛型边界、泛型与继承)
2019-03-03