token的处理

最新推荐文章于 2024-06-01 22:55:42 发布
最新推荐文章于 2024-06-01 22:55:42 发布
阅读量3.8k 收藏 8
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xg1201/article/details/123966728
版权

        首先在用户点击登入的时候，将用户名和密码传给服务器，服务器去对用户名和密码进校验，验证通过将token返回给前端，前端拿到token后，将token存储到公共的状态管理工具中也就是vuex，然后再持久化到本地也就是存到localStrong中

有了token后，我们就可以做很多的事情，

比如说：

1、在请求拦截器中我们可以把token统一注入到请求头中 

2、在进行页面跳转的时候，判断有无token，如果有就去对应的页面，如果没有就跳转到登录页

3、判断token的失效，当token失效时，将token删除，并跳转到登录页 

前端怎么将token传给后端

通过header的方式，将token放在请求头中

为什么说使用refresh token安全

其实所谓的安全就是不容易盗取用户信息，当我们的token设置时间过长是不安全的，而如果设置的时间很短的话用户就需要频繁登录，给用户的体验也是极差的

而我们可以通过refresh token 来延迟登录的时长，如果fresh token被盗了，想刷新access token的话，就需要提供过期的access token这个盗取的难度就增强了，同时refresh token只有在第一次获取和刷新access token时才会在网络中进行传输，被盗的风险小于access token，从而在一定程度上安全了一点

叶涵1201
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的一个可以获取到token的小案例
03-04
自己写的一个可以获取到token的小案例
前端Token管理(获取、过期处理、异常处理及优化)_前端登录及登录过期
2401_85013615的博客
05-15 1428
/ 如果这正在刷新，返回一个 Promise ，并向刷新token成功后执行队列push 函数.// 判断access_token 是否过期且接口是否需要token。// 在请求的header中设置token。// 通过参数传 登录成功后的跳转地址。//如果获取token失败 抛出异常。// 执行获取token后的任务队列。// 刷新token后的任务队列。// 是否正在执行刷新token。// 判断是否有刷新token。//刷新token锁为true。// 登录成功后进行路由跳转。
前端登录退出：处理Token问题（获取、缓存、失效处理）以及代码实现
热门推荐
背心的博客
11-05 1万+
前端登录退出：处理Token问题（获取、缓存、失效处理）以及代码实现
对前端传过来的token进行解析，获取用户信息
最新发布
weixin_65363325的博客
06-01 430
是一个字符串（utf-8 编码）、缓冲区、对象或 KeyObject，其中包含 HMAC 算法的密钥或 RSA 和 ECDSA 的 PEM 编码私钥。如果私钥带有密码，则可以使用对象。（一般是用户信息，解析之后可以看到信息，建议生token的时候剔除用户敏感信息，例如登录密码）原因：因为node后端生成的token是一个字符串，不带有Bearer ，把jwt**.**decode（token）中token去除Bearer。简单来说：他就一个密钥，可以自己定义，在一个文件定义好之后，在需要的地方，调用它。
Token的使用
m0_50846834的博客
11-11 4400
springboot+vue实现前后端分离中token的使用
前端获取存储的本地token并传输给后端
little_orange_0的博客
06-17 1532
局部headers获取token传递给后端
在项目中如何处理token？
weixin_46185369的博客
11-18 5457
token-处理-整体分析 背景 在项目中，后端接口中只有登录接口是不需要token的，其他接口都需要token才能访问。 分析 登陆功能之后，从后端获取到了token值，在接下来的其他请求中，接口服务器都会去检查token值，这里我们提前把它保存到统一管理公共状态的 vuex中 token-处理-将token保存到vuex中 目标 使用vuex来保存登录接口获取到的token vuex的基本使用流程 使用vuex的基本逻辑：数据放在state中，要修改数据则调用mutations 先在state中补充
web前端处理token
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
02-20 9062
一 使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的： 客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里 客户端每次向服务端请求资源的时候需要带着服务...
KatalonStudio之接口测试中token处理
01-27
本篇将详细介绍如何在Katalon Studio中处理接口测试中的token处理，特别是获取和使用access_token的过程。 1. **创建API/Web Service项目**： 首先，你需要在Katalon Studio中创建一个新的API/Web Service项目。在...
vue的token刷新处理的方法
10-18
本文将详细介绍如何在 Vue 应用中处理 `token` 的刷新，以确保用户在 `token` 过期后仍能保持登录状态，提供良好的用户体验。 `token` 身份验证机制： 当用户成功登录后，服务器会返回一个经过特殊算法加密的 `...
Android token过期刷新处理的方法示例
08-26
Android Token 过期刷新处理方法示例 Android Token 过期刷新处理是移动端应用程序中常见的问题之一。当用户的 Token 过期时，应用程序需要重新刷新 Token，以确保用户的身份验证。下面是 Android Token 过期刷新...
前端Token管理(获取、过期处理、异常处理及优化)
赵忠洋的博客
11-22 1万+
文章内容输出来源：拉勾教育大前端高薪训练营； 本文实例代码使用的是vue+axiosÏ 什么是Token Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。 请求后台返回的登录数据一般情况如下 { access_token:"加密的字符串", expires_in:"7200", refresh_token:.
前端token是什么意思？怎么设置保存？应用场景？实现思路？
m0_61663332的博客
11-09 3493
服务端生成的一串字符串，作为客户端进行请求的一个标识。信息，更新用户登录后的信息收集，封装。返回的状态码，设置拦截器，对失效。信息实现拦截登录，并提示用户。，实现用户退出登录，调用。
token的处理和整体分析
weixin_68983685的博客
06-04 626
token描述
前端各类内容记录
weixin_51561130的博客
09-16 213
最好把dist里的东西搞到gh-pages分支。2. vue打包到github-page。3. 信息保存在本地。
【APISIX网关快速上手】
fylysyn12291211的专栏
06-29 241
访问Dashboard:http://127.0.0.1:9000，admin/admin user/user。第三步，创建消费者，配置jwt-auth，配置好插件的。其中 ，key是配置的账号（admin/user）中添加上一步获取到的Token后即可正常访问；第四步，获取tocken，通过浏览器访问地址。第二步，创建路由，开启jwt-auth插件。key=admin，得到tocken。第五步，访问第二步中的路由，在请求头。第一步，先添加获取tocken路由。
【前端指南】session和token
秃头仔仔-安凯雯的博客
10-22 3811
- session和token本质上是没有区别的,都是对用户身份的认证机制,知识他们实现的校验机制不同而已 - 一个保存在server,通过在Redis等中间件获取来校验 - 一个保存在client,通知签名校验的方式来验证
工作199:获取接口token
歌谣的博客
12-04 467
1第一步设置token getAction("/user/info").then(res=>{ Vue.ls.set('Set_Token',res.data.access_token) }) 2第二步 设置token serviceXing.interceptors.request.use(function (config) { // Do something before request is sent //window.localStorage
vue获取token(设置token,清除token)实现登录方式
weixin_52416396的博客
10-09 2789
实现了本地数据存储只是用来延长token存在的时间其他的一切操作都是用vuex内的state.user内的数据来进行。3、前端收到后端传给的token值，将token存储在本地 有3种方法我们选用 sessionStorage。2 存取麻烦，在存储对象数组类型的时候要用JSON转换为JSON类型的字符串。2、后端收到请求，验证用户名和密码，返回给前端一个token值。导出了存储数据，获取数据，和删除数据的函数，数据的转换在这里进行。缺点： 数据存储的有效时间短，刷新页面数据消失。在min.js全局引入。
请使用node.js和express-jwt写一份完整token处理以及中间件并且全局使用中间件
03-31
以下是一份完整的token处理和中间件： ```javascript const jwt = require('jsonwebtoken'); const expressJwt = require('express-jwt'); // 配置jsonwebtoken const JWT_SECRET = 'secret'; const JWT_EXPIRATION_TIME = '1h'; // 生成token const generateToken = payload => { return jwt.sign(payload, JWT_SECRET, { expiresIn: JWT_EXPIRATION_TIME }); }; // 验证token const validateToken = (req, res, next) => { expressJwt({ secret: JWT_SECRET })(req, res, err => { if (err) { return res.status(401).json({ error: err.message }); } next(); }); }; // 中间件 const middleware = (req, res, next) => { // 获取token const token = req.headers['authorization'] && req.headers['authorization'].split(' ')[1]; if (!token) { return res.status(401).json({ error: 'Token not found' }); } // 验证token jwt.verify(token, JWT_SECRET, (err, decoded) => { if (err) { return res.status(401).json({ error: 'Token is invalid' }); } req.user = decoded; next(); }); }; // 全局使用中间件 app.use(middleware); ``` 使用方法： ```javascript // 生成token const token = generateToken({ username: 'john' }); // 验证token app.get('/protected-route', validateToken, (req, res) => { res.json({ message: 'Welcome to the protected route!' }); }); ``` 在上面的例子中，我们定义了一个`generateToken`函数来生成token，还定义了一个`validateToken`中间件来验证token是否有效。我们还定义了一个`middleware`中间件来获取和验证token，并将解码后的用户信息存储在`req.user`中。最后，我们使用`app.use(middleware)`来全局使用中间件。 在路由中使用`validateToken`中间件来保护需要验证token的路由。这样，只有在提供有效的token时，才能访问受保护的路由。 这是一种基本的方式来处理token，并且使用`express-jwt`可以让我们更轻松地验证token。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值