【WitSystem】详解JWT在系统登录过程中前端做了什么事，后端又做了什么事？

要理解 JWT（JSON Web Token）登录流程中前端与后端的职责分工，需先明确 JWT 的核心定位：它是一种无状态的身份认证令牌，用于替代传统 Session 认证，解决跨服务、跨域登录的问题。其流程本质是“后端生成令牌 → 前端存储并携带令牌 → 后端验证令牌”的闭环，以下分步骤拆解两端的具体操作。

一、前置概念：JWT 的结构与作用

在讲解流程前，需先明确 JWT 的组成（共 3 部分，用.分隔），这是理解后续验证逻辑的基础：

部分名称作用
第一部分Header（头部）声明令牌类型（JWT）和签名算法（如 HS256、RS256），Base64 编码（可解码）
第二部分Payload（载荷）存储非敏感的用户身份信息（如 userID、角色、过期时间 exp），Base64 编码（可解码）
第三部分Signature（签名）用 Header 指定的算法，结合后端密钥对前两部分加密，确保令牌未被篡改

⚠️ 关键提醒：Payload 是 Base64 编码（不是加密），任何人都能解码，因此绝对不能存密码、手机号等敏感信息！

二、JWT 登录完整流程：前端 + 后端分工

JWT 登录流程分为 3 个核心阶段：登录请求阶段、令牌存储与携带阶段、接口访问验证阶段。两端在每个阶段的操作明确且互补，具体如下：

阶段 1：登录请求阶段（用户输入账号密码，获取 JWT）

这是流程的起点，目标是让后端验证用户身份，并生成合法的 JWT 令牌返回给前端。

1.1 前端做什么？

核心动作：收集用户信息 → 发送登录请求 → 接收并暂存令牌

  1. 收集并校验用户输入：
    • 通过登录表单获取用户输入的账号（如手机号/邮箱）、密码；
    • 前端做基础合法性校验（非空、格式验证，如手机号是否符合 11 位规则），避免无效请求占用后端资源。
  2. 发送 POST 登录请求：
    • 向后端登录接口（如 /api/login）发送请求，请求体携带用户信息（通常用 JSON 格式）；
    • 示例请求体：
      {"username": "zhangsan","password": "123456aA!"  // 实际项目中需加密（如 HTTPS + 前端简单哈希），避免明文传输
}
  3. 接收后端响应并处理：
    • 若登录失败（如账号密码错误）：提示用户“用户名或密码错误”，流程终止；
    • 若登录成功：后端会返回 JWT 令牌（通常在响应体的 token 字段，或 Header 的 Authorization 字段），前端需暂存令牌（下一步会讲持久化存储），并跳转至首页/登录后的页面。
1.2 后端做什么？

核心动作：验证用户身份 → 生成 JWT 令牌 → 返回令牌

  1. 接收并验证用户身份：
    • 接收前端发送的账号密码，先对密码进行解密（若前端加密）；
    • 从数据库中查询该账号对应的记录，对比加密后的密码（后端存储密码必须用哈希算法加密，如 BCrypt，绝对不能存明文）；
    • 若账号不存在或密码不匹配，返回 401（Unauthorized）错误，附带失败信息。
  2. 生成 JWT 令牌：
    • 若身份验证通过，构建 JWT 的 Payload（载荷），必须包含过期时间（exp）（如当前时间 + 2 小时，避免令牌永久有效），可选包含 userID、role（角色，用于权限控制）等非敏感信息；
    • 用 Header 中指定的算法（如 HS256），结合后端唯一密钥（Secret Key） 对 Header + . + Payload 进行签名，生成完整的 JWT 令牌；
      ⚠️ 关键：后端密钥必须安全存储（如配置中心、环境变量），绝对不能硬编码在代码中，否则密钥泄露会导致令牌被伪造！
  3. 返回令牌给前端：
    • 将生成的 JWT 令牌放在响应体中（如 { "code": 200, "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", "msg": "登录成功" }），或放在响应头的 Authorization 字段（格式通常为 Bearer <token>）；
    • 返回 200（OK）状态码，完成登录响应。

阶段 2：令牌存储与携带阶段（前端持久化令牌，后续请求携带）

登录成功后，前端需持久化存储令牌（避免页面刷新后令牌丢失），并在后续所有需要身份验证的接口请求中主动携带令牌，让后端识别用户身份。

2.1 前端做什么？

核心动作：持久化存储令牌 → 拦截请求并携带令牌 → 处理令牌过期

  1. 持久化存储令牌：

    • 常用存储方案对比（需根据项目需求选择）：
      存储方式优点缺点适用场景
      localStorage永久存储（除非手动删除）、容量大（5MB）易受 XSS 攻击（脚本可读取）非敏感场景，如普通网站
      sessionStorage会话级存储（关闭标签页后删除）易受 XSS 攻击，页面刷新不丢失临时登录，如敏感操作页面
      Cookie可设置 HttpOnly（防 XSS）、Secure（仅 HTTPS）易受 CSRF 攻击，容量小（4KB）高安全场景，如金融类应用
    • 最佳实践：若用 Cookie 存储，需开启 HttpOnly（禁止前端 JS 读取，防 XSS）、Secure（仅 HTTPS 传输）、SameSite=Strict（防 CSRF）；若用 localStorage，需配合前端 XSS 防护（如输入过滤、CSP 策略）。

  2. 拦截请求并携带令牌：

    • 用前端请求库（如 Axios、Fetch）的请求拦截器，对所有需要身份验证的接口（如 /api/user/info、/api/order/list）自动添加令牌；
    • 携带格式：遵循后端约定，通常放在请求头的 Authorization 字段，格式为 Bearer <token>（注意 Bearer 后有空格）；
      示例 Axios 拦截器代码：
      // Axios 请求拦截器
axios.interceptors.request.use(config => {// 从 localStorage 中获取令牌const token = localStorage.getItem('token');if (token) {// 给请求头添加 Authorization 字段config.headers.Authorization = `Bearer ${token}`;}return config;
}, error => Promise.reject(error));

  3. 处理令牌过期/无效：

    • 若后端返回 401（令牌过期）或 403（令牌无效），前端需清除本地存储的令牌，跳转至登录页，并提示“登录已过期，请重新登录”；
    • 进阶方案：可使用“双令牌机制”（Access Token + Refresh Token），Access Token 过期时，用 Refresh Token 自动请求新的 Access Token，避免频繁让用户重新登录。
2.2 后端做什么？

此阶段后端无主动操作，但需为后续“令牌验证”做准备：

  • 确保密钥和签名算法的一致性（生成令牌和验证令牌必须用同一套密钥和算法）；
  • 若用“双令牌机制”，需存储 Refresh Token 的状态（如是否已过期、是否已注销），通常存在 Redis 中（便于快速查询和失效）。

阶段 3：接口访问验证阶段（后端验证令牌，确认用户身份）

当前端携带 JWT 访问需要身份验证的接口时，后端需通过一系列校验确认令牌合法性，进而允许/拒绝接口访问。

3.1 前端做什么？

核心动作：发送携带令牌的请求 → 处理后端验证结果

  • 无需额外操作，只需通过请求拦截器自动携带令牌（如阶段 2 所述）；
  • 接收后端响应：若验证通过，正常处理接口返回的数据（如渲染用户信息、订单列表）；若验证失败（401/403），执行“令牌过期处理”（如跳转登录页）。
3.2 后端做什么？

核心动作：提取令牌 → 验证令牌合法性 → 解析用户信息 → 权限控制

  1. 提取请求中的令牌：

    • 从请求头的 Authorization 字段中提取令牌（需先去除 Bearer 前缀）；
    • 若未提取到令牌，直接返回 401 错误，提示“请先登录”。

  2. 验证令牌合法性（核心步骤）：
    后端需通过 3 重校验确保令牌有效，缺一不可：

    • 校验签名（防篡改）：
      用生成令牌时的密钥和算法，对令牌的 Header + . + Payload 重新计算签名，与令牌的 Signature 部分对比；若不一致，说明令牌被篡改，返回 403（Forbidden）错误。
    • 校验过期时间（防永久有效）：
      解码令牌的 Payload，获取 exp（过期时间，时间戳格式），与当前服务器时间对比；若 exp < 当前时间，说明令牌已过期，返回 401 错误。
    • 校验令牌有效性（防注销/黑名单）：
      若项目中存在“主动注销”功能（如用户点击“退出登录”），后端需将已注销的令牌加入“黑名单”（通常存在 Redis 中，过期时间与令牌 exp 一致）；校验时需查询黑名单，若令牌在黑名单中，返回 401 错误。

  3. 解析用户信息并绑定上下文：

    • 若令牌验证通过，解码 Payload 中的 userID、role 等信息；
    • 将用户信息绑定到当前请求的“上下文”中（如 Java 的 ThreadLocal、Node.js 的 req.user），方便后续接口逻辑直接使用（如查询“当前用户的订单”时，直接从上下文获取 userID，无需再传参数）。

  4. 权限控制（可选，基于角色/权限）：

    • 若接口需要特定权限（如“删除订单”仅允许管理员操作），从请求上下文提取用户 role，与接口要求的权限对比；
    • 若权限不满足，返回 403 错误，提示“无操作权限”；若满足，允许接口继续执行业务逻辑（如查询数据库、返回数据）。

三、核心区别：JWT 与传统 Session 认证的两端分工差异

理解 JWT 流程后，可通过对比传统 Session 认证，更清晰看到 JWT 的“无状态”优势：

对比维度JWT 认证传统 Session 认证
后端存储无状态（不存储令牌，仅存密钥）需存储 Session ID（如 Redis/数据库）
前端存储存储 JWT 令牌（localStorage/Cookie）存储 Session ID（通常在 Cookie 中）
跨服务/跨域支持（令牌自带身份信息，无需共享 Session）不支持（需共享 Session 存储，跨域 Cookie 受限）
后端验证验证令牌签名和过期时间（本地计算，速度快）查 Session 存储确认 ID 有效性（IO 操作，速度慢）

四、安全注意事项（前端 + 后端）

  1. 前端安全：

    • 不存储敏感信息到 Payload（如密码、身份证号）；
    • 优先用 Cookie 存储令牌并开启 HttpOnly、Secure、SameSite；
    • 避免在 URL 中携带令牌（会被日志记录，泄露风险高）。

  2. 后端安全：

    • 密钥必须安全存储（配置中心/环境变量），定期轮换；
    • 令牌过期时间不宜过长（如 1-2 小时），避免长期泄露风险；
    • 开启 HTTPS 传输（防止令牌被中间人拦截窃取）；
    • 实现“令牌黑名单”机制，处理主动注销场景。

总结：JWT 登录流程的核心是“后端生成可信令牌，前端携带令牌证明身份，后端验证令牌合法性”。前端的核心职责是“存储和携带令牌”，后端的核心职责是“验证令牌和控制权限”，二者通过 JWT 令牌实现无状态的身份认证，解决了传统 Session 认证的跨域、跨服务痛点。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/100337.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/100337.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MongoDB 在线安装-一键安装脚本（CentOS 7.9）

MongoDB 在线安装-一键安装脚本（CentOS 7.9）

1. 脚本概述本脚本用于在 CentOS 7.9 系统上在线安装 MongoDB&#xff0c;自动处理端口占用和重复安装问题&#xff0c;并创建管理员用户 test8&#xff0c;密码 test123。2. 功能停止并关闭防火墙检查 27017 端口占用并结束进程如果已安装 MongoDB&#xff0c;卸载重装配置 Mo…
阅读更多...
树形数据结构之树状基础-算法赛

树形数据结构之树状基础-算法赛

今天给分享的是一道算法决赛的题目&#xff0c;这道题目的综合要求比较高&#xff0c;希望大家可以好好理解&#xff0c;同时这道题用到的是树状树形结构的有关知识。可以用这几天学的相关内容结合起来。问题描述给定两个长度为 N的排列 A 和 B。若一对二元组下标 (i,j) 满足以…
阅读更多...
Jenkins 构建清理策略：自带功能 vs Discard Old Build 插件，全场景实操指南

Jenkins 构建清理策略：自带功能 vs Discard Old Build 插件，全场景实操指南

前言&#xff1a;在 Jenkins 持续集成过程中&#xff0c;构建记录、工作空间、产物包会不断积累&#xff0c;既占用磁盘空间&#xff0c;也会让构建历史变得臃肿。Jenkins 自带的“丢弃旧的构建”功能和 Discard Old Build 插件&#xff0c;是两种常见的构建清理方案。本文将详…
阅读更多...
Leetcode | Hot100

Leetcode | Hot100

文章目录两数之和字母异位词分组最长连续序列移动零盛水最多的容器三数之和接雨水无重复字符的最长子串找到字符串中所有字母异位词和为 K 的子数组滑动窗口最大值最小覆盖子串最大子数组和合并区间轮转数组除自身以外数组的乘积缺失的第一个正数矩阵置零螺旋矩阵旋转图像搜索二…
阅读更多...
【论文阅读】Uncertainty Modeling for Out-of-Distribution Generalization (ICLR 2022)

【论文阅读】Uncertainty Modeling for Out-of-Distribution Generalization (ICLR 2022)

论文题目&#xff1a;Uncertainty Modeling for Out-of-Distribution Generalization 论文来源&#xff1a;ICLR 2022 论文作者&#xff1a; 论文链接&#xff1a;https://arxiv.org/pdf/2202.03958 论文源码&#xff1a;https://github.com/lixiaotong97/DSU ​ 一、摘要…
阅读更多...
分布式系统单点登录(SSO)状态管理深度解析：从Cookie+Session到JWT的演进之路

分布式系统单点登录(SSO)状态管理深度解析：从Cookie+Session到JWT的演进之路

分布式系统单点登录(SSO)状态管理深度解析&#xff1a;从CookieSession到JWT的演进之路作者&#xff1a;默语佬 | CSDN博主 在分布式微服务架构盛行的今天&#xff0c;单点登录已成为企业级应用的标准配置。本文将深入探讨SSO状态管理的技术演进&#xff0c;从传统的CookieSess…
阅读更多...
从 WPF 到 Avalonia 的迁移系列实战篇7：EventTrigger 的迁移

从 WPF 到 Avalonia 的迁移系列实战篇7：EventTrigger 的迁移

从 WPF 到 Avalonia 的迁移系列实战篇7&#xff1a;EventTrigger 的迁移 在 WPF 中&#xff0c;EventTrigger 是非常常用的功能&#xff0c;它可以让我们直接在 XAML 中绑定事件与动画或动作&#xff0c;实现 UI 的交互效果。例如按钮点击时旋转、鼠标悬停时变色等。 然而&…
阅读更多...
深圳比斯特|电池组PACK自动化生产线厂家概述

深圳比斯特|电池组PACK自动化生产线厂家概述

电池组PACK自动化生产线是指用于生产电池模组的一套自动化系统。这类生产线主要用于生产各类电池组&#xff0c;如锂离子电池组&#xff0c;应用于电动汽车、储能系统等领域。自动化生产线通过机械设备和计算机控制系统&#xff0c;实现电池组生产过程的自动化和高效率。整条生…
阅读更多...
基于librdkafa C++客户端生产者发送数据失败问题处理#2

基于librdkafa C++客户端生产者发送数据失败问题处理#2

https://blog.csdn.net/qq_42896627/article/details/149025452?fromshareblogdetail&sharetypeblogdetail&sharerId149025452&sharereferPC&sharesourceqq_42896627&sharefromfrom_link 上次我们介绍了认证失败的问题。这次介绍另一个问题生产者发送失败…
阅读更多...
pg卡死处理

pg卡死处理

[postgresapm ~]$ ps -ef|grep postgres:|grep -v grep|awk {print $2}|xargs kill -9 锁&#xff1a; 1 查找锁表的pid select pid from pg_locks l join pg_class t on l.relation t.oid where t.relkind r and t.relname lockedtable; 2 查找锁表的语句 select pid, …
阅读更多...
Spring Boot 与 Elasticsearch 集成踩坑指南：索引映射、批量写入与查询性能

Spring Boot 与 Elasticsearch 集成踩坑指南：索引映射、批量写入与查询性能

前言Elasticsearch 作为分布式搜索和分析引擎&#xff0c;凭借其高性能、可扩展性和丰富的查询能力&#xff0c;被广泛应用于日志分析、全文检索、电商搜索推荐等场景。 在 Spring Boot 项目中集成 Elasticsearch 已成为很多开发者的日常需求&#xff0c;但真正落地时往往会踩到…
阅读更多...
windows 10打开虚拟机平台时，出现错误“找不到引用的汇编”解决办法

windows 10打开虚拟机平台时，出现错误“找不到引用的汇编”解决办法

通过dism.exe开启虚拟机平台时&#xff0c;出现了以下错误&#xff1a;找不到引用的汇编&#xff0c;如下图所示 通过以下命令进行修复均无效&#xff1a; dism /online /cleanup-image /scanhealth sfc /scannow 最后通过加载windows系统的安装光盘iso, 双击setup.exe以【保…
阅读更多...
设计模式(C++)详解——建造者模式（1）

设计模式(C++)详解——建造者模式（1）

<摘要> 建造者模式是一种创建型设计模式&#xff0c;通过将复杂对象的构建过程分解为多个步骤&#xff0c;使相同的构建过程能够创建不同的表示形式。本文从背景起源、核心概念、设计意图等角度深入解析该模式&#xff0c;结合电脑组装、文档生成等实际案例展示其实现方式…
阅读更多...
移动端触摸事件与鼠标事件的触发机制详解

移动端触摸事件与鼠标事件的触发机制详解

移动端触摸事件与鼠标事件的触发机制详解 在移动端开发中&#xff0c;我们经常会遇到一个现象&#xff1a;一次简单的触摸操作&#xff0c;不仅会触发touch系列事件&#xff0c;还会触发一系列mouse事件&#xff0c;最终甚至会触发click事件。这其实是浏览器为了兼容传统桌面端…
阅读更多...
如何科学评估CMS系统性能优化效果？

如何科学评估CMS系统性能优化效果？

为什么要评估性能优化效果&#xff1f; 在投入时间精力优化CMS系统后&#xff0c;很多开发者只凭"感觉"判断网站变快了&#xff0c;但这种主观判断往往不可靠。科学评估性能优化效果可以帮助我们&#xff1a; 量化优化成果&#xff1a;用数据证明优化的价值发现潜在问…
阅读更多...
中控平台数据监控大屏

中控平台数据监控大屏

中控平台数据监控大屏前言&#xff1a;什么是数据大屏&#xff1f; 数据大屏就像是一个"数字仪表盘"&#xff0c;把复杂的数据用图表、动画等方式直观展示出来。想象一下汽车的仪表盘&#xff0c;能让你一眼看到速度、油量、转速等信息——数据大屏也是这个原理&…
阅读更多...
【Vue2手录13】路由Vue Router

【Vue2手录13】路由Vue Router

一、Vue Router 基础概念与核心原理 1.1 路由本质与核心要素 本质定义&#xff1a;路由是URL路径与页面组件的对应关系&#xff0c;通过路径变化控制视图切换&#xff0c;实现单页应用&#xff08;SPA&#xff09;的无刷新页面切换。核心三要素&#xff1a; router-link&#x…
阅读更多...
【Git】零基础入门：配置与初始操作实战指南

【Git】零基础入门：配置与初始操作实战指南

目录 1.前言 插播一条消息~ 2.正文 2.1概念 2.2安装与配置 2.3基础操作 2.3.1创建本地仓库 2.3.2配置Git 2.3.3认识工作区&#xff0c;暂存区&#xff0c;版本库 2.3.4版本回退 2.3.5撤销修改 2.3.6删除文件 3.小结 1.前言 在 Java 开发场景中&#xff0c;团队协…
阅读更多...
CAD多面体密堆积_圆柱体试件3D插件

CAD多面体密堆积_圆柱体试件3D插件

插件介绍 CAD多面体密堆积_圆柱体试件3D插件可在AutoCAD内基于重力堆积算法在圆柱体容器内进行多面体的密堆积三维建模。插件采取堆积可视化交互界面&#xff0c;可观察多面体颗粒的堆积动态&#xff0c;并可采用鼠标进行多面体位置的局部微调。插件可设置重力堆积模拟时长参数…
阅读更多...
机器学习-模型调参、超参数优化

机器学习-模型调参、超参数优化

模型调参 手工超参数微调 以一个好的baseline开始&#xff0c;即&#xff1a;在一些高质量的工具包中的默认设置&#xff0c;论文中的值调一个值&#xff0c;重新训练这个模型来观察变化重复很多次获得对以下的insight&#xff1a; 1、哪个超参数重要 2、模型对超参数的敏感度是…
阅读更多...
最新文章

Copyright @ 2022~2023