react使用localStorage存储token

最新推荐文章于 2024-07-24 17:53:33 发布
最新推荐文章于 2024-07-24 17:53:33 发布
阅读量8.5k 收藏 10
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013455430/article/details/88108321
版权

登录的接口传回Token，将其直接放在store中刷新后自动丢失，所有考虑用redux-persist去处理，由于相对复杂所以就放弃了

然后找到了用localStorage存储数据的方法

登录时将接口返回的数据存入localStorage

 

登录接口调用成功后 调用函数将数据保存，登录刷新后判断取出数据

可以直接取出使用，也可以放入state中 ，在退出登录时清空localStorage

 

The Dark Kinght
关注
专栏目录
React学习09----localStorage存储数据，封装模块
翟浩浩Android专栏
02-22 3134
ocalStorage 是es5提供的： ocalStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 ocalStorage 存储字符串。 常见用法： 存储数据 localStorage.setItem(key,value); 拿到数据 localStorage.getItem(key); 删除数据 localStorage.removeItem(key)； 项目...
「开发者投稿」使用 Authing 对 SPA 应用进行身份认证实践
Authing的博客
01-12 293
作者段清华，「最懂金融的 AI 工程师，微软 AI 领域最有价值专家（MVP），谷歌开发者专家（GDE），希望加速人类的生产力，让智能比电力与宽带更普及。」 为什么需要云身份验证和单点登录 简单来说是为了降低维护用户注册登录系统、权限、统计等各方面的成本。 应用结构简述 通过 Authing 实现身份验证和单点登录，有很多种方法，这篇文章的例子是根据自身软件架构，实现了其中一种相对简单的方法，并不适用所有情况，Authing 本身还提供了多种的登录解决方案，包括直接嵌入到网站上、APP 上的等等。 前端.
react中使用Redux管理token以及token持久化
最新发布
kanno的博客
07-24 735
react中使用Redux管理token以及token持久化
react--localStorage存储
weixin_42429288的1博客
06-26 525
项目结构如下 路由文件如下 import React from 'react'; import {BrowserRouter as Router,Route} from 'react-router-dom'; import MainPage from './mainPage' import City from './city' export default class Main exte...
React中使用LocalStorage用户登录
chunchun1230的博客
03-10 1613
localStorage 通常用来存储服务器发送的一些数据或者用户自定义数据。localStorage 中的键值对总是以字符串的形式存储。 (意味着数值类型会自动转化为字符串类型)。 与 cookie 相比，localStorage 的存储量较大（cookie只有2k，只能存放字符串），下面介绍如何使用 localStorage 存储、获取、使用数据。与 sessionStorage 相比，存储...
react 通过localstorage永久存储数据
dqzd12345的博客
10-31 2660
1、先在src目录下创建一个目录 1）storageUtils.js文件 /** * 此模块是用于local数据存储管理的工具模块 */ import store from 'store' const USER_KEY = 'user_key' const storage = { /** * 存储user */ saveUser(user) { store.set(USER_KEY,user) }, /** * 获取user */ .
react-React组件可以安全地在渲染阶段将数据保存到localStorage
08-14
React组件可以安全地在渲染阶段将数据保存到localStorage
支持过期时间的localStorage React Hook
qq_1015350043的博客
03-06 615
最近自己造了一个轮子，支持过期时间的localStorage React Hook。这次使用「tsdx」构建项目，tsdx是一个用于ts开发的零配置命令行工具，构建时自动添加打包工具、测试...
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 将token充入_react 获取token
weixin_39811150的博客
12-19 329
1.在action 中发送请求，j将获取得到的token 储存起来 到localhost//登陆发送请求export const loginUser = (userData,history)=>dispatch=>{axios.post("/api/user/login",userData).then(res=>{const { token }=res.data;con...
12.React Native数据本地存储；
Tiger的专栏
04-19 1万+
目录 1.数据本地存储介绍 目录 1.数据本地存储介绍 2.AsyncStorage使用 2.1react-native-storage 2.2添加库几种方式 2.3引入react-native-storage库 2.4.保存、修改和删除数据操作 2.5使用key和id来保存数据，一般是保存同类别（key）的大量数据。 3.过期数据处理(sync属性设置) 3.1定义s...
react-token-auth
05-02
免责声明 我用了解授权的方式制作了这个小图书馆。 我不建议使用此库，因为它可能会导致安全问题。 将身份验证令牌存储在本地存储中并不安全，因为页面上的任何JavaScript代码都可以访问本地存储，这使您的应用容易受到不同形式的攻击（尤其是XSS）攻击。 React令牌验证 npm install react-token-auth 动机 react-token-auth是一个小型库，用于在auth流程中管理令牌。 它不能解决所有可能的用例，但可以帮助解决最常见的用例之一：当拥有accessToken和refreshToken ，您需要将它们存储在localStorage并在必要时进行更新。 React应用程序中auth的问题之一是，您需要使应用程序的状态（例如，用户已经登录）和localStorage令牌保持同步。 另外，您需要确保在fetch使用的令牌有效。 例子 该库具有TypeSc
react 存储token
05-26
React本身并不提供存储token的功能，但你可以使用浏览器提供的localStorage或sessionStorage来存储token。 localStorage可以将数据存储在浏览器中，即使浏览器关闭也不会丢失数据。而sessionStorage只能在当前会话...
python中的token bytes_Python接口自动化之Token详解及应用
weixin_39783149的博客
01-29 294
在上一篇Python接口自动化测试系列文章：Python接口自动化之cookie、session应用，介绍了cookie、session原理及在自动化过程中如何利用cookie、session保持会话状态。以下介绍Token原理及在自动化中的应用。一、Token基本概念及原理1.Token作用为了验证用户登录情况以及减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。2.什么是TokenTo...
react+redux完成登录页面及token的存取和登录保持
黄钢的博客
03-27 1695
关于登录页面，我在写vue项目的时候，写了很多篇博客来记录。原因是登录确实比较复杂，涉及前后端联调、全局数据管理、浏览器本地存储等多个环节的技术。框架换成react后，逻辑是一样的，但是技术栈及语法却完全不一样了，有必要记录一下整个过程。首先看看登录界面，简单的两个输入框，和一个登录按钮，用的antDesign的UI框架。
react 将token充入_token的应用以及react项目中如何全局匹配token参数
weixin_39982017的博客
12-19 382
接口对接实质：1、登录成功php生成token储存到数据库表中，2、返回到前端页面储存cookie的值‘token’3、axios提交头部信息，头部信息的值用token4、后台PHP接收头部信息，接收到了获取用户id在做登录页面的时候后台会返回一个token的值，此时前端拿到token值之后要储存在本地存储中，之后再第一时间拿到的值中做全局配置，具体代码如下：var storage=window....
React 配置 Redux 并结合本地存储设置token
sonic
10-26 1983
此 React 项目使用 TypeScript 和 Hooks API，本文介绍配置 Redux 并结合本地存储设置 token
React localStorage用法
an74520的专栏
07-04 1万+
简单介绍下localStorage用法：存储通过setItem键值方式，值存入是String类型的数据。 例如：localStorage.setItem("key","value"); 当然也可以存储对象，需要用JSON.stringify(obj)；转换一下获取通过getItem("key") 方式，如果存入的是对象就用JSON.parse("")转换成你想要的对象。...
有关React-hooks的token自己的理解及应用
weixin_45868552的博客
03-25 876
在这里聊聊关于我对token的浅显认知，由于本人学习前端不久，如有错误，请指正。 一、token是什么 1、token的本质就是一串字符串，是一段从服务端生成的字符串。在你进行登录时，前端会保存你登录的数据，比如用户名，密码，邮箱，手机号等等。。。。然后通过请求发送到后端，后端对你的前端传来的数据进行加密（根据安全性，可以使用不同的加密算法进行不同程度的加密），生成字符串。 2、token主要是用来干啥的，很多人说token是个令牌，对，确实没错，token就是令牌作用。当用户登录后进入到其他的功能页面，之
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值