如何将token放到localStorage中

已于 2022-07-28 16:47:12 修改
阅读量6.1k 收藏 22
点赞数 7
分类专栏： 前端 文章标签： jquery js
于 2021-08-09 13:48:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lh155136/article/details/119536164
版权

设置localStorage
调用后端登录接口，后端会返回一个token，将token放到localStorage中

// 在localStorage存储token
window.localStorage.setItem("token",后端返回的token);

获取localStorage中的token

window.localStorage.getItem("token")
菜鸟fox
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用localStorage存储token
jinann0的博客
12-12 6758
vue中可以使用localStorage方式和sessionStorage方式来存储数据，现在描写的就是运用localStorage把登录时获取到的token存储到浏览器中
如何保存token-localStorage存储
qq_27474555的博客
12-03 1万+
1、原理 原理是通过vue-router的beforeEach钩子，在每次路由到一个地址的时候先判断该路由是否携带了meta信息，且该信息中的requireAuth是否为true，如果为true表示该路由是需要身份验证的。则去localStorage找token，若token不存在则表示用户无认证，去登录请求token。若token存在则拿着token去请求。 2、token保存 login.vu...
localStorage.getItem(“token“) || ‘‘ TypeScript报错
最新发布
追逐知识的过程最能使我们意识到自己的无知...
05-01 233
​ 报错信息：Unexpected nullable string value in conditional. Please handle the nullish/empty cases explicitly.eslint@typescript-eslint/strict-boolean-expressions ​
（已解决）如何将token存入本地localStorage，如何清除localStorage中的数据
BrianGriffin的博客
03-06 516
我需要完成利用token进行页面拦截，涉及到了标题的知识，所以记录一下。将token存入本地localStorage。清除localStorage中的数据（所有）清除localStorage中的数据（单条）
token存在于localstorage还是sessionstorage?
qq_59068526的博客
10-16 377
token存在于localstorage还是sessionstorage?
在vue中获取token,并将token写进header的方法
10-17
这里使用了`Vuex`来管理全局状态，通过`commit`调用`set_token` mutation将Token保存到`Vuex`的store中，并可能存储在`localStorage`或`sessionStorage`。 2. **Vuex状态管理**： 在`store.js`中，我们定义了一个...
请求时token过期自动刷新token操作
10-14
首先，有一个封装的统一请求函数，它会获取`localStorage`中的`token`并将其添加到请求头中。当服务器返回的状态码表示`token`已过期（例如`code === 1002`），则触发`refreshTokenRequst`函数来获取新`token`。 4....
vue拦截器实现统一token,并兼容IE9验证功能
12-11
项目中使用vue搭建前端...// 这里的config包含每次请求的内容，在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = window.localStorage.getItem("tokenid"); //从缓存中取toke
工厂模式在JS中的实践
11-29
最近的项目的登陆使用了Owin认证，所以token必须找好地方进行存储，鉴于token需要在请求API资源的时候放到请求头的Authorization当中，以便在进入WebAPI前进行身份验证。所以我不想在主流浏览器中的cookie中存储...
angular 用拦截器统一处理http请求和响应的方法
12-10
想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去，也就是{headres:{‘token’:1}} index.html里引入以下js： angular.module('app.factorys',[]) .factory('...
vue生成token保存在客户端localStorage中的方法
08-29
本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
localstorage 本地存储及token设置，vuex刷新数据丢失
Jerry子辰的博客
04-02 2962
本地存储简介 简单介绍：前端开发时js可以调用api在浏览器存储数据，大小总共未5M 可再浏览器查看，f12打开控制台 方式： 1.localstorage 在本地浏览器长期存储，需要手动清除才会消失(清除浏览器缓存或调用js方法清除） 2.sessionstorage 在本地浏览器存储，但只存在一次会话级（即浏览器关闭再打开就没了） 使用： localstorage和sessionstorage使用一样，下面的只需要替换就行 // 存：第一个参数为存在本地的名字，即本地容器的名字 localstorag
vue前端利用localStorage存储token值并放到请求头headers实例
热门推荐
bentou_的博客
04-08 2万+
vue前端利用localStorage存储token值并放到请求头headers实例 之前在关于登录接口的一篇博客里，我有提到过token，在这篇博客里我会介绍token在前端如何存取，同时把它放在请求头里获取数据。 1、关于token 为什么要用Token： Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，...
JWT Token存储在Cookie还是LocalStorage
weixin_38655450的博客
11-05 2555
JWT 是将web 应用无状态化的一种方式。 1. 首先拿到JWT Token HTTP/1.1 POST /token Host: galaxies.com Content-Type: application/x-www-form-urlencoded username=abc&password=password 服务器返回 HTTP/1.1 200 OK { "access_token": "eyJhbGciOiJIUzI1NiIsI.eyJpc3MiOiJodHRwczotcGx...
Token与LocalStorage
qq_44706044的博客
05-20 2016
Token与LocalStorage什么是Token?为什么要有Token?Token在项目中的应用逻辑什么是localStorage? 什么是Token? token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。 当用户第一次登录后，服务器生成一个token并将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。 简单token的组成；uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token的前几
localStorage的使用方法
奋斗的新丁
04-13 1052
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 储存/更新数据 localStorage.setItem('Token', res.data.token) 取出数据 localStorage.getItem('Token') 删除储存数据 l
token 应该存在 Cookie、SessionStorage 还是 LocalStorage 中？
生命不息，挖坑不止
06-28 4873
3. LocalStorage：将token存储在localStorage中的优点是，即使在浏览器关闭后，localStorage中的数据仍然存在，因此用户可以保持登录状态。2. SessionStorage：将token存储在sessionStorage中的优点是，它只在当前会话中存在，当用户关闭浏览器后，sessionStorage中的数据将被清除。这种方式的缺点是，如果用户在浏览器中打开新的标签页或窗口，那么新的页面将无法访问sessionStorage中的数据。在Web开发中，安全性是非常重要的。
如何把token保存到本地
m0_58974838的博客
06-11 7230
1.
身份令牌toKen Vuex + localStorage结合存储
xieyuleisss的博客
08-22 1183
前提：我们都知道在登陆的时候后台会返回一串字符串，也就是token, 也是我们常说的身份令牌， 在后续的请求中只有在请求头中携带了token才会被允许访问后台数据，因此如何存储token就显得尤为重要。 如果直接将 ToKen 存储在 Vuex容器中， 好处： 1. 获取方便 2.响应式 缺点： 只要页面一刷新就没数据了。 为了持久化，还需要把 Token 放到本地存储（localStorage–除非手动清除，永久存在） 持久化 所以，我们采取 Vuex 和 本地存储相结合的方式 来存储 Token 我们
登录成功后如何将token放入localStorage并设置token的过期时间
07-14
在登录成功后将 token 存储在 localStorage 中并设置 token 的过期时间，可以按照以下步骤进行操作： 1. 在登录成功的响应中，获取返回的 token。假设后端返回的 token 存储在 `response.data.token` 中。 2. 将 token 存储在 localStorage 中。可以使用 `localStorage.setItem()` 方法将 token 存储在 localStorage 的一个特定键中，例如 `localStorage.setItem('token', response.data.token)`。 3. 设置 token 的过期时间。可以使用 `localStorage.setItem()` 方法将过期时间存储在另一个键中，例如 `localStorage.setItem('tokenExpiration', expirationTime)`。`expirationTime` 可以是一个时间戳或表示未来某个时间的日期对象。 4. 在全局守卫中检查 token 是否过期。可以在全局守卫中获取 localStorage 中存储的过期时间，并与当前时间进行比较。如果过期时间小于当前时间，则表示 token 已过期，此时可以清除存储的 token，并将用户重定向到登录页。 以下是一个示例代码，展示了如何将 token 存储在 localStorage 中并设置过期时间： ```javascript // 登录成功后将 token 存储在 localStorage 中 localStorage.setItem('token', response.data.token); // 设置 token 过期时间为 1 小时后 const expirationTime = new Date().getTime() + 60 * 60 * 1000; localStorage.setItem('tokenExpiration', expirationTime); ``` 请注意，上述代码仅为示例，你可能需要根据实际需求进行相应的调整，例如设置不同的过期时间，或在过期时间到达后执行其他操作。 希望对你有所帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值