JWT，安全加密你的验证和授权信息

前言

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涉及以下几个步骤：

1. 用户登录 当用户登录时，后端验证凭据，如果成功，将生成一个JWT并将其发送回前端。在Vue.js中，通常会在登录成功的回调中处理这个过程。以下是一个简单的jwt集成。

javascript

代码解读

复制代码

function sign(option) { return jwt.sign(option, '11',{ expiresIn: 86400 //token过期时间 一天 }) }

1. 存储JWT 前端应该安全地存储接收到的JWT。常见的做法是将其保存在localStorage或sessionStorage中。例如：

   javascript

   代码解读

   复制代码

   javascript 深色版本 localStorage.setItem('jwt', jwtToken);

2. 请求拦截器 为了在每个请求中自动添加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; });

3. 验证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); } } }

1. 刷新令牌 JWT具有一定的有效期，一旦过期，就需要重新认证。在一些场景中，可以实现刷新令牌机制，即使用短期的访问令牌和长期的刷新令牌，当访问令牌过期时，使用刷新令牌获取新的访问令牌。