REACT 全局token获取不是最新的问题

最新推荐文章于 2023-03-19 00:13:31 发布
最新推荐文章于 2023-03-19 00:13:31 发布
阅读量533 收藏 1
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31444707/article/details/107187101
版权

在我们登录后通常我们会把token存储在localstory中，从后台获取菜单的时候需要给后端传这个token，而在开发中为了方便起见我就把token获取放在了class组件外面方便全局使用（下图）

然而在调取后台接口的时候却发现token一直失效，在一步步打印出来时发现token获取的一直都是上次的token从而导致我得token已过期，至于原因可能是因为在你没有登陆的时候这个时候他就已经获取了你浏览器中的token

解决办法：

 只需要你在class组件内部获取就可以了，或者在你的拦截器中直接获取都是可以的，虽然小问题，但也是记录下

 

IT大天使
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant design pro [react] 给接口统一添加token
weixin_39061000的博客
08-20 2099
代码如下： const addToken =(async (url, options) => { // 此处为拦截器，每次发送请求之前判断能否取到token if (localStorage.getItem('srmToken')) { const headers = { 'access_token': `${localStorage.getItem('srmToken')}`, }; return { url, option...
axios请求拦截器与携带token
Coding and studying
01-07 3258
ajax异步请求，axios请求拦截器与携带token的步骤
react 怎么在localstorage中提取数据
dqzd12345的博客
10-31 1159
localStorage.getItem('user_key') 1、在state里面定义一个变量来接收 state = { userInfo: JSON.parse(localStorage.getItem('user_key'))[0] } 1)可以在render()里面打印这个数据出来看看 console.log(this.state.userInfo) ...
react的axios添加token和token失效验证
m0_60322879的博客
05-08 2277
a1das
React工作20:token的获取
qq_41632427的博客
07-16 329
React工作20:token的获取
react-node-demo:本项目主要集合基于token登录状态验证的登录，以及node后台实现基于token登录接口，还有一套前后端的增删改查
05-15
本项目主要集合基于token登录状态验证的登录，以及node后台实现基于token登录接口，还有一套前后端的增删改查，简单的demo；后续还会持续完善其他前后端常用功能模块。 前端技术栈 react + redux + react-router + ...
react-navigation 如何判断用户是否登录跳转到登录页的方法
08-28
在 React Navigation 中，可以根据 Token 是否存在来判断用户是否登录。 3. 使用 Storage：可以使用 Storage 来存储用户的登录状态。例如，可以使用 AsyncStorage 或 redux-persist 等库来存储用户的登录状态。然后...
slack-boom:一个Slack机器人，当用户的一条消息达到负面React阈值时自动将其踢出
05-16
:collision: 松弛臂 一个Slack机器人，当用户的一条消息达到负面React阈值时自动将其踢出或使用npm install --global slack-boom全局npm install --global slack-boom 运行slack-boom <token> <treshold> <reaction>...
vue+ts下对axios的封装实现
11-20
而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新...
javascript实现fetch请求返回的统一拦截
10-15
在这个示例中，我们在请求时自动添加了'Content-Type'和'Accept'头，并从localStorage获取token添加到headers中，实现了请求拦截。同时，我们使用`checkStatus`函数来检查响应状态，根据需要处理错误，实现了返回...
React判断无token状态的问题
L_yvpeng的博客
01-31 477
在平时的项目中，做到登陆的一个状态，就会遇到在没有等登陆的情况下不让其访问其它页面，和在token过期的情况下应该要返回login页面的业务问题，这边带大家如何实现这些业务问题，并用来来实现在token过期的情况下应该返回login页面的业务问题。
react中 token过期，如何处理？
weixin_58089129的博客
11-19 2470
思路：首先在request.js中的响应拦截器这块写token失效的提示，然后再让它进行清空token和路由跳转 第一步：在request.js文件中 导入 import store from '@/store' import { logout } from '@/store/actions/login' 第二步：在响应拦截器下写代码： 具体代码如下： // 响应拦截器 处理返回异常 数据脱壳 instance.interceptors.response.use( functi.
localStorage和sessionStorage的监听
weixin_44251396的博客
07-26 3041
1.先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法 export default { //localStorage dispatchEventStroage() { const signSetItem = localStorage.setItem localStorage.setIte...
React 登录获取token并存储及解析token
热门推荐
周家大小姐
03-26 2万+
仓库地址:https://gitee.com/zhouyunfang/react-project/tree/formAuthenticated/ 目录 存储token 解析token 解决页面刷新,数据消失问题 当前目录: 存储token login.js import React, { Component } from 'react' // 实现ui组件和数据连接 i...
react-ajax请求后台数据方法
pinganaaa的博客
04-18 1869
react-ajax axios 方法一：在package.json中配置 "proxy":"http://localhost:5000" 这样localhost:5000就是我们要代理到的服务器 getStudentData = () => { axios.get('/students').then( (result) => { console.log(result.data); }, (reason) => { console.log(re
解决react中aixos请求头携带token跨域请求拒绝
jasend的博客
03-19 482
【代码】解决react中aixos请求头携带token跨域请求拒绝。
后台获取不到请求头中token信息的解决方法
weixin_45151960的博客
11-03 8178
项目要做单点登录功能，于是在shiro的基础上加入了自定义的Filter，使用JWT自定义生成和校验token信息。功能写好后自己在postman中测试了效果，将token放在Headers中请求后台接口（如下图，还没发现问题），结果是测试成功开心的告诉前端可以对接了。过了一会，前端说接口一直返回token为空的错误信息。然后我就开始debug测试，发现前端发来请求头中确实没有找到token，但是Network。
react 全局监听路由（浏览器url）变化
好巧的博客
08-12 1万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。UNSAFE_componentWillReceiveProps 钩子函数同样被触发 ，可以看到路由改变触发执行了两次。三个对象传入 props 对象上，路径变化，属性就会变化，属性变化，就会触发。这个钩子，可以通过这个钩子监听路由的变化，监听整个项目的路由。如果本篇文章对你有帮助的话，很高兴能够帮助上你。不存在的路由同样能被监听到，手动修改为。
解决create-react-app build 后静态资源文件夹(static)路径不对
Chad97的博客
08-07 1万+
Reason 在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下，这样的情况就好出现服务器访问 index 找不到static 下面的资源，仔细看我们会发现访问路径变成了根文件 例如： www.test/build/static/cs.css # 变成 www.test/static/cs.css 因为我们的webpack 默认以项目为根目录 ho...
react登陆页面获取token并验证
最新发布
03-23
可以通过发送用户名和密码到后端API来获取token，然后将token存储在本地存储中。在后续的请求中，可以将token作为请求头的Authorization字段发送到后端API进行验证。具体实现可以参考React官方文档或者相关的第三方库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值