likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 24

前言

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集成。
function sign(option) {
    return jwt.sign(option, '11',{
        expiresIn: 86400  //token过期时间 一天
    })     
}

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

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

  2. 请求拦截器 为了在每个请求中自动添加JWT，可以设置一个axios请求拦截器。在Vue项目中，可以通过以下方式实现：

    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()进行验证

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

结论

JWT提供了一种高效、安全的方式来处理用户验证和授权。在Vue.js项目中，通过恰当的集成和使用，可以极大地提高应用程序的安全性和用户体验。无论是在单页应用还是API服务器上，JWT都是一种值得考虑的身份验证方案。

转载自:https://juejin.cn/post/7399604686989557771
评论
请登录