Json Web Token在前后端实践思考分析

Json Web Token在前后端实践思考分析

什么是Json Web Token(JWT)

JSON Web Token(JWT)是一种用于在两个实体之间安全传输消息的开放标准(RFC 7519)。JWT以JSON格式编码数据,可以安全地存储在URL参数、POST参数、HTTP标头或Cookie中。JWT包括三个部分:头部,载荷和签名,最终生成的JWT字符串通常具有三段式的形式 xxx.yyy.zzz。其中XXX表示这个头部,YYY表示这个载荷,而ZZZ则表示签名。

JWT的使用场景

JWT通常用于Web应用程序和API接口的设计中,用于身份验证和授权。 在用户成功登录后,JWT会生成并发送到客户端,客户端可以将JWT存储在Cookie或localStorage中,并在每次向服务器发送请求时将JWT包含在请求头或其他需要的地方。 服务器在接收到请求时,会验证JWT是否合法并取出其中的信息,以确定用户是否可以访问被请求的资源。

JWT的优缺点

优点

  1. 减轻服务器压力:JWT自包含,自描述,可以包含用户身份信息,减少服务器查询DB的次数。
  2. 跨域传输:JWT 在预设的几个重要参数中没有存储服务端的IP和端口,可随意在各个服务间流通传递。
  3. 安全性好:JWT 中包含了签名信息,保证了传输过程中信息的不被篡改和窃听。

缺点

  1. 可以被窃取:如果JWT被不法分子拦截,那么该分子拥有的就是这个用户的全部身份信息了。
  2. JWT中的算法可能会引起安全性问题: 目前 JWT 中使用最多的几个算法就是 HMAC SHA256 和 RS256,使用不当,轻则会导致 JWT 被轻易破解,严重的话还会影响服务端的安全性。

JWT的实现思路

在实际应用中,JWT的应用通常会按照以下流程进行:

  1. 用户使用用户名密码登录
  2. 服务器验证用户名密码,生成JWT并返回到客户端
  3. 客户端将JWT存储在Cookie或localStorage中
  4. 在每次向服务器发送请求时,客户端将JWT包含在请求头或其他需要身份验证的地方
  5. 服务器通过验证JWT的签名和有效期,取出其中的信息并判断用户是否有权限访问被请求的资源

下面,我们详细介绍如何在前后端中使用JWT。

在前端中使用JWT

生成JWT

前端生成JWT一般使用 JS库 jsonwebtoken 。示例代码如下所示:

const jwt = require('jsonwebtoken');
const secret = 'my_secret_key'; // 这个 key 不能被泄露出去
const payload = { username: 'admin' }; // 载荷,通常存储用户信息

const token = jwt.sign(payload, secret, { expiresIn: '1h' }); // 签发 JWT,设置过期时间为 1 小时
console.log(token); // 输出 JWT 字符串

存储JWT

前端可以将JWT【存储在Cookie中】或【存储在LocalStorage中】。这里以LocalStorage为例:

localStorage.setItem('my_token', token);

在每次请求中发送JWT

前端可以通过请求头的方式将JWT发送到服务器上。示例代码如下所示:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user');
xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('my_token')}`);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

在后端中使用JWT

验证JWT

服务器端通常会使用 Node.js】中间件库 express-jwt 验证JWT的有效性,示例代码如下所示:

const express = require('express');
const jwt = require('express-jwt');

const app = express();
const secret = 'my_secret_key';

app.use(
  jwt({
    secret,
    algorithms: ['HS256'],
  }).unless({
    path: ['/login'],
  })
);

app.get('/api/user', (req, res) => {
  console.log(req.user.username); // 输出用户名信息
  res.send(req.user);
});

app.listen(3000, () => {
  console.log('Server start at http://localhost:3000');
});

在上述代码中, jwt() 从请求中解析出JWT,然后验证签名的有效性,如果JWT验证通过,解码后的用户信息就被附加到请求的 req.user 属性中,下面路由中就可以使用 req.user 来访问用户的信息了。

生成JWT

服务器端生成JWT也可以使用上述 jsonwebtoken 库的 sign() 调用,示例代码如下所示:

const jwt = require('jsonwebtoken');
const secret = 'my_secret_key';
const payload = { username: 'admin' };
const token = jwt.sign(payload, secret, { expiresIn: '1h' });
res.send({ token });

总结

以上是JWT在前后端分别的实践思考分析。使用JWT可以有效地解决跨域通信问题,并提升数据安全性。当然,针对JWT本身的安全威胁,我们需要在使用前详尽地评估其是否合适自己的应用场景,严格按照规范调用API。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Json Web Token在前后端实践思考分析 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 详解JavaScript UTC时间转换方法

    详解JavaScript UTC时间转换方法 在JavaScript中,我们通常使用的日期对象保存的是本地时间。但是,在跨时区使用的情况下,UTC时间经常会被使用。要将本地时间转换为UTC时间,或者将UTC时间转换为本地时间,可以使用JavaScript提供的函数来完成。下面介绍JavaScript UTC时间转换的方法。 1. new Date(Date.…

    JavaScript 2023年5月27日
    00
  • js cookies实现简单统计访问次数

    下面是详细讲解“js cookies实现简单统计访问次数”的完整攻略: 1. 什么是cookies? Cookie,有时也用复数形式Cookies,指某些网站为了辨别用户身份、进行Session跟踪而储存在用户本地终端上的数据(通常经过加密)。Cookies是网站为了维护用户状态而储存在用户本地终端上的数据。 2. 如何利用js实现统计访问次数? 实现网站的…

    JavaScript 2023年6月11日
    00
  • JS实现的四级密码强度检测功能示例

    下面我将详细讲解“JS实现的四级密码强度检测功能示例”的完整攻略,包括功能简介、实现思路、代码示例和代码说明等内容。请您耐心阅读。 功能简介 该示例是一个基于JavaScript实现的密码强度检测功能。通过输入密码,程序能够判断密码的强度,并给出相应的提示信息。根据密码的不同,分为四级强度等级,即弱、中、强和极强。 实现思路 实现该功能,需要通过JavaSc…

    JavaScript 2023年6月10日
    00
  • 5款JavaScript代码压缩工具推荐

    当我们的JavaScript代码变得越来越复杂时,它的大小也会随之增加。这意味着每次用户打开我们的网站时,都要下载更多的JavaScript代码。为了优化加载速度和性能,许多开发人员选择使用JavaScript压缩工具来减小代码的大小。本文将为您介绍五个优秀的JavaScript代码压缩工具,并解释如何在您的项目中使用它们。 1. UglifyJS Ugli…

    JavaScript 2023年5月27日
    00
  • JS获取IP、MAC和主机名的五种方法

    当网站需要获取客户端设备的IP、MAC地址或主机名时,我们可以使用JavaScript来实现。接下来,我们将会介绍五种获取这些信息的方法。 获取IP地址的方法 使用XMLHttpRequest对象向外部API发起请求,从响应中获取IP地址信息。 function getIP() { const xhr = new XMLHttpRequest(); xhr.…

    JavaScript 2023年5月28日
    00
  • javascript基本包装类型介绍

    JavaScript 基本包装类型指的是 Boolean、Number 和 String 这三种类型,它们提供了将基本类型值转换为对象的能力。在需要调用方法时,这种类型非常方便。 Boolean Boolean 基本包装类型表示的是布尔值,即 true 和 false。创建 Boolean 对象有两种方式:一种是通过 Boolean 构造函数创建,另一种是使…

    JavaScript 2023年5月19日
    00
  • UpdatePanel触发javascript脚本的方法附代码

    关于”UpdatePanel触发javascript脚本的方法”,我来详细讲解一下。 首先,我们需要了解一下UpdatePanel是什么。UpdatePanel在ASP.NET中是一个用来局部刷新页面的控件。当UpdatePanel中的内容需要更新时,ASP.NET会自动发送异步请求并更新指定部分的内容。而JavaScript脚本则是一种脚本语言,可以用来为…

    JavaScript 2023年6月10日
    00
  • javascript中数组的常用算法深入分析

    当我们学习JavaScript编程语言的时候,数组(Array)是一种非常常见和重要的数据结构。数组是一种基本的JavaScript数据类型,它是用来存储一组数据的容器。在日常开发中,我们常常需要对数组进行各种操作。本文将详细介绍JavaScript中数组的常用算法,并分析其实现原理。 数组的常用方法 下面是常用的数组处理方法: 1. 数组去重 functi…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部