当前位置: 首页 > news >正文

react 将token充入_token的应用以及react项目中如何全局匹配token参数

4346c53431976077bd54e7e4718eb3f4.png

接口对接实质

1、登录成功php生成token储存到数据库表中,

2、返回到前端页面储存cookie的值‘token’

3、axios提交头部信息,头部信息的值用token

4、后台PHP接收头部信息,接收到了获取用户id

在做登录页面的时候后台会返回一个token的值,此时前端拿到token值之后要储存在本地存储中,之后再第一时间拿到的值中做全局配置,具体代码如下:

var storage=window.localStorage;//在react组件之外定义一个变量为本地存储
//请求接口的方法
    userOnLine=()=>{
     axios
     .post("/safemgmt/api/admin/login",{
         username:this.state.userName,
         password:this.state.password,
     })
     .then(res=>{
         if(res.data.code==="0"){
          window.location.href="#/admin/home"//点击之后跳转到的组件
         }
         storage=res.data.result.token;//这块是从后台获取到的token值赋值给storage
 //--------------------下面这块获取全局缓存然后全局加入token参数------------------------
         axios.interceptors.request.use(function (config) {
          config.withCredentials = true
          config.headers = {
              token:storage
          }
          return config;
          }, function (error) {
          return Promise.reject(error);
      })
     })   
    }
}

匹配完之后,如果请求后台的格式不统一(比如有的时候可以是json格式有的时候是form格式),这种情况下可能会出现一个问题,form格式的请求后台发现参数由冒号变成了等号,(axios传给后台多了一个等号)如果在post请求中加入headers,发现不起作用,因为上面全局headers覆盖掉了。(如下)

//错误代码
import axios from 'axios';
let baseURL='http://192.168.1.1:8000/user/login';
axios.post(
    baseURL,
    qs.stringify({id:41}), //qs.stringify是将json转化为string格式
    {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
     //这种格式的是form表单格式,
).then(result => {
// 代码
}

正确代码:去掉 qs.stringify和headers,并且和后台协调,让后台把请求格式变为统一:如都统一为json格式

//正确代码
import axios from 'axios';
let baseURL='http://192.168.1.1:8000/user/login';
axios.post(baseURL,{id:41}, //去掉qs.stringify
).then(result => {
// 代码
}

PS:本人只是一枚废柴小码农,在实战中积累经验,只是将所踩过的坑分享出来给遇到同样坑的小伙伴们提个醒,可能会少走些弯路。如果能帮助到你解决实际问题,我将更加坚定分享的初衷:一起成长。 目前只在知乎上和简书上更新文章,准备在这两个地方持续更新文章,您的关注对我可能是莫大的鼓励。

简书用户名:废柴码农

微博用户名:有温度的壁纸

哈哈,交个朋友啦~

相关文章:

  • eclipse中git拉项目_在Eclipse使用git管理项目工程代码
  • redis 值字符串前面部分乱码_详细解读——Redis内存模型及应用
  • 各自然带代表植被_陆地自然带:从森林、草原到荒漠,具有非常复杂的地域差异性...
  • hashmap是单向链表吗_HashMap原理详解,看不懂算我输(附面试题)
  • php语言输出九九乘法表_c语言单链表:有头结点和无头结两种列表的区别以及创建和输出的区别...
  • active vue 路由样式保持_网易云音乐接口+vue全家桶开发一款移动端音乐webApp
  • matlab求kcf算法响应图_1周学FFT——第5天 时间抽选奇偶分解基-2 FFT算法
  • xlwt追加写入_python3中关于excel追加写入格式被覆盖问题(实例代码)
  • 地图上的标签为图片_三种方式制作数据地图
  • arcengine 将一个shp的数据读取到另一个shp_从零开始,构建电子地图网站:0_3_数据处理python(1)...
  • python极简主义_极简主义的践行者:一行python有哪些玩法?
  • idea中maven找不到本地仓库jar包_Mac Intellij Maven使用本地仓库的jar包
  • mysql默认安装目录 linux_关于Linux安装mysql默认配置文件位置详解
  • jquery mysql实现加入购物车_jquery-实现加入购物车效果
  • mysql 查询最近7天 时间戳数据_mysql查询今天、昨天、7天、近30天、本月数据
  • 【node学习】协程
  • 8年软件测试工程师感悟——写给还在迷茫中的朋友
  • Angular6错误 Service: No provider for Renderer2
  • Effective Java 笔记(一)
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • Java 多线程编程之:notify 和 wait 用法
  • Javascript 原型链
  • Java应用性能调优
  • Js基础知识(四) - js运行原理与机制
  • js中的正则表达式入门
  • js作用域和this的理解
  • learning koa2.x
  • Mybatis初体验
  • Redux系列x:源码分析
  • RxJS: 简单入门
  • scala基础语法(二)
  • Swoft 源码剖析 - 代码自动更新机制
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • v-if和v-for连用出现的问题
  • Zepto.js源码学习之二
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 关于extract.autodesk.io的一些说明
  • 使用parted解决大于2T的磁盘分区
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • 赢得Docker挑战最佳实践
  • 责任链模式的两种实现
  • 怎么将电脑中的声音录制成WAV格式
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​LeetCode解法汇总2304. 网格中的最小路径代价
  • #### go map 底层结构 ####
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • $ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • (2)关于RabbitMq 的 Topic Exchange 主题交换机
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (poj1.3.2)1791(构造法模拟)
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)