前言
jwt令牌可以应用在我们很多项目开发的场景下,基本上所有的项目都会有一些验证信息以及授权信息相关的需求,目的是为了避免一些数据泄露给权限不够或者验证失败的用户,那么此时就需要jwt令牌的出场了。
这里举一个例子,比如我们在用户登录功能,用户成功完成登录时,前端如果直接将后端响应来的用户信息直接保存在浏览器的localStorage中,这样很可能会造成账号信息的泄露,所以在我们后端进行账号信息验证时,若验证成功此时我们就可以利用jwt将账号信息封装成一个加密的token,再将该token返回给前端存储,这样加密过后的数据就更加安全不易泄露。
JWT
JWT简称JSON Web Tokens,是一种用于在网络应用间安全传递声明(claims)的开放标准(RFC 7519),简单来说它是一种自闭和的令牌,这意味着所有用于验证和授权的数据都存储在令牌本身中。这使得JWT成为了在分布式站点之间安全传输信息的理想选择。
JWT由三部分组成:Header(头部)、Payload(负载)和Signature(签名)。各部分通过点号(.)连接。JWT的设计使其可以在无状态的环境中工作,这意味着服务器不需要存储会话信息。当客户端与服务器交互时,只需要在HTTP请求头中包含JWT,服务器即可解码并验证令牌,从而确认用户身份。
- Header 包含令牌类型(通常是JWT)和所使用的签名算法(如HS256)。
- Payload 是实际存储信息的部分,可以包含用户ID、角色等信息。
- Signature 确保了JWT未被篡改,由Header、Payload和一个密钥通过指定的算法生成。
Vue.js中的JWT集成
在Vue.js应用程序中使用JWT涉及以下几个步骤:
- 用户登录 当用户登录时,后端验证凭据,如果成功,将生成一个JWT并将其发送回前端。在Vue.js中,通常会在登录成功的回调中处理这个过程。以下是一个简单的jwt集成。
javascript
代码解读
复制代码
function sign(option) { return jwt.sign(option, '11',{ expiresIn: 86400 //token过期时间 一天 }) }
-
存储JWT 前端应该安全地存储接收到的JWT。常见的做法是将其保存在localStorage或sessionStorage中。例如:
javascript
代码解读
复制代码
javascript 深色版本 localStorage.setItem('jwt', jwtToken);
-
请求拦截器 为了在每个请求中自动添加JWT,可以设置一个axios请求拦截器。在Vue项目中,可以通过以下方式实现:
ini
代码解读
复制代码
javascript 深色版本 import axios from 'axios'; axios.interceptors.request.use(config => { const token = localStorage.getItem('jwt'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; });
-
验证JWT 在服务器端,每当收到带有JWT的请求时,都需要验证令牌的有效性。这通常涉及到检查签名是否正确,以及检查令牌是否过期。下面是一个服务器端检查令牌的函数verify(),通过jwt.verify()进行验证
csharp
代码解读
复制代码
function verify() { return async(ctx, next) => { try { const jwtToken = ctx.req.headers.authorization if (jwtToken) { //先判断是否有令牌 console.log('有token') const decoded = jwt.verify(jwtToken,'11') if(decoded.id){ console.log('token合法'); ctx.userId = decoded.id await next() } }else{ } } catch (error) { ctx.body = { code:809, msg:'Token失效或note中错误' } console.log(error); } } }
- 刷新令牌 JWT具有一定的有效期,一旦过期,就需要重新认证。在一些场景中,可以实现刷新令牌机制,即使用短期的访问令牌和长期的刷新令牌,当访问令牌过期时,使用刷新令牌获取新的访问令牌。