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日

相关文章

  • BootStrap+Mybatis框架下实现表单提交数据重复验证

    首先,我们需要明确一下实现表单提交数据重复验证的基本思路。我们可以在页面上的表单中增加一个校验码字段,每次提交时,先检测校验码,若校验码匹配成功则将表单数据保存至数据库,否则提示用户“数据已存在”。 下面是实现表单提交数据重复验证的完整攻略: 一、创建数据库表 我们可以先创建一个名为user的数据库表,用来存储用户表单提交数据。以下是该表的基本结构: CRE…

    JavaScript 2023年6月10日
    00
  • Vue中通过vue-router实现命名视图的问题

    Vue中通过vue-router实现命名视图的问题,主要是为了实现将一个路由对应多个视图模板的需求。下面将详细介绍如何实现这一需求。 什么是命名视图 如果一个路由只对应一个视图模板,那么我们可以通过下面的方式定义路由: const routes = [ { path: ‘/’, component: Home }, { path: ‘/about’, com…

    JavaScript 2023年6月11日
    00
  • js表单事件详细汇总

    关于“js表单事件详细汇总”的完整攻略,我将分为五部分进行讲解。 第一部分:什么是表单事件 表单事件是在用户与表单交互时触发的JavaScript方法。表单事件绑定在表单元素上,例如input、button、form等。 第二部分:表单事件的使用方法 表单事件可以通过addEventListener()或on事件属性来绑定。addEventListener(…

    JavaScript 2023年6月10日
    00
  • 常见的原始JS选择器使用方法总结

    常见的原始JS选择器使用方法总结 选择器是 JavaScript 编程中非常重要的一部分。选择器是用于访问和操作文档中的 HTML 元素的方法。 在 JavaScript 中,有多种类型的选择器,其中包含了基础选择器、层级选择器、伪选择器等。本文将总结常见的原始 JavaScript 选择器使用方法。 基础选择器 基础选择器是 JavaScript 中最常用…

    JavaScript 2023年6月10日
    00
  • Javascript代码混淆综合解决方案-Javascript在线混淆器

    JavaScript代码混淆指的是将源代码中的变量、函数名、字符串等易于理解的符号转换为难以理解的符号,以保护程序源代码不被盗用、篡改或者窃取重要信息。 JavaScript在线混淆器是一款基于浏览器的JavaScript代码混淆工具,可以在线对源代码进行混淆操作,能够有效提高JavaScript代码的安全性。下面将为您介绍Javascript代码混淆综合解…

    JavaScript 2023年5月20日
    00
  • js实现的类marquee水平循环滚动

    JS实现的类marquee水平循环滚动,是指在一个容器内部以水平方向不间断滚动一段文字或图片等内容,类似于HTML中的标签效果。以下为完整的攻略: 步骤1:HTML结构 首先,在HTML中建立一个容器,例如: <div id="scroll-container"> <span>这是一段滚动文字</span&g…

    JavaScript 2023年6月11日
    00
  • 全面解析js中的原型,原型对象,原型链

    全面解析JS中的原型、原型对象、原型链 1. 原型 在Javascript中,每个函数都有一个内部属性 prototype,可以被称为原型。我们可以通过构造函数的 prototype 属性来为所有实例共享方法和属性。 function Person(name, age) { this.name = name; this.age = age; } Person…

    JavaScript 2023年5月27日
    00
  • 浅谈php中urlencode与rawurlencode的区别

    浅谈PHP中urlencode与rawurlencode的区别 当我们需要发送HTTP请求时,我们需要将某些字符进行编码,才能正确的处理它们。在PHP中,我们可以使用urlencode()函数和rawurlencode()函数来进行编码操作。这两个函数有什么区别呢?在本文中,我们将对这两个函数进行介绍和比较。 urlencode函数 urlencode函数是…

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