JWT由繁入简 带你三分钟明白JWT的使用原则(直接上手COPY有手就行)

于 2024-07-22 15:04:56 发布
阅读量365 收藏 4
点赞数 15
文章标签： java spring boot vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75521619/article/details/140609400
版权

先上代码 再看解释😊

后端：

第一步：

引入pom依赖（我这里是jdk1.8引入的jjwt）

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>

第二步

这是全部的创建token和解析token

  

package com.example.hyzn.demos.utils;

import cn.hutool.core.lang.UUID;
import io.jsonwebtoken.*;

import java.util.Date;

public class JwtUtil {
    private static long time= 1000*60*60*24;//设置的过期时间是一天
    private static String signature="admin";
    
    //创建token的代码
    public static String createToken(){
        JwtBuilder jwtBuilder = Jwts.builder();
        String stringJwtBuilder = jwtBuilder
                //header
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
                //patload
                .claim("userName", "Shen")
                .claim("role", "admin")
                .setSubject("admin-test")
                .setExpiration(new Date(System.currentTimeMillis() + time))
                .setId(UUID.randomUUID().toString())
                //signature
                .signWith(SignatureAlgorithm.HS256, signature)
                .compact();
       return stringJwtBuilder;
    }
   //解析token的代码
    public static boolean checkToken(String token){
        if(token == null){
            return false;
        }
        try {
            Jws<Claims> claimsJws = Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
        } catch (Exception e) {
            return false;
        }
        return true;
    }
}

第三步

测试entity(必须要有这个Serializable序列化)

package com.example.hyzn.demos.domain.Request;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

/**
 * 学生表
 * @TableName user
 */
@TableName(value ="user")
@Data
public class UserQuest implements Serializable {
    /**
     * 账号
     */
    @TableId
    private String userName;

    /**
     * 密码
     */
    private String password;

    /**
     * token
     */
    private String token;

    @TableField(exist = false)
    private static final long serialVersionUID = 1L;
}

第四步

后端的controller层这里面设置的是死的账号密码

/**
 * @author 32551
 */
@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {

    private final String USERNAME="admin";

    private final String PASSWORD="123456";

    @PostMapping("/register")
    public BaseResponse<Long> userRegister(@RequestBody UserVo userVo) {
        if (userVo == null) {
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        return ResultUtils.success(userService.userRegister(userVo), "成功");
    }


    @PostMapping("/login")
    public BaseResponse<UserQuest> userLogin(@RequestBody UserQuest userQuest) {
       if(USERNAME.equals(userQuest.getSno())&&PASSWORD.equals(userQuest.getPassword())){
           userQuest.setToken(JwtUtil.createToken());
           return ResultUtils.success(userQuest,"成功");
       }
       return null;
    }
    @GetMapping("/checkToken")
    public Boolean checkToken(HttpServletRequest request){
        String token = request.getHeader("token");
        return JwtUtil.checkToken(token);
    }
}

第五步

解决跨域问题 (这里面的   .allowedOrigins("http://localhost:9898/#/userLogin","http://localhost:9898/#/chat"是用来拦截前端页面的按自己的需要来)


/**
 * 全局跨域处理
 */
@Configuration
public class CoresConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(@NotNull CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*")
                        .allowedOrigins("http://localhost:9898/#/userLogin", "http://localhost:9898/#/chat")
                        .allowCredentials(true)
                        .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                        .maxAge(3600);
            }
        };
    }
}

这里的后端就大功告成了

前端：

在router配置文件中设置文件跳转问题

这里面配置跳转页面拦截

router.beforeEach((to, from, next) => {
    // 允许未登录访问的路径
    const openPaths = ['/userLogin', '/chat'];

    if (openPaths.includes(to.path)) {
        // 如果目标路径是开放路径，直接放行
        next();
    } else {
        // 获取存储在本地的admin对象
        let admin = JSON.parse(window.localStorage.getItem('access-admin'));

        if (!admin) {
            // 如果没有admin对象，跳转到登录页面
            next({ path: '/userLogin' });
        } else {
            // 验证token的合法性
            axios({
                url: 'http://localhost:7877/user/checkToken',
                method: 'get',
                headers: {
                    token: admin.token
                }
            }).then((response) => {
                if (!response.data) {
                    // 如果token验证失败，跳转到登录页面
                    console.log('校验失败');
                    next({ path: '/userLogin' });
                } else {
                    // 如果token验证成功，继续导航
                    next();
                }
            }).catch(() => {
                // 处理验证请求失败的情况
                next({ path: '/userLogin' });
            });
        }
    }
});

再设置login页面

主要看js代码就好了 

前端你们得自己配置跳转路由 我这里安装了router

<template>
  <div class="login-page">
    <van-nav-bar title="登录" left-arrow />
    <div class="login-container">
      <h2 class="login-title">欢迎登录移动服务平台</h2>
      <van-field class="van-border" v-model="sno" label="" placeholder="请输入身份证号" />
      <van-field class="van-border" v-model="password" label="" type="password" placeholder="请输入密码" />
      <van-button type="danger" class="login-button" @click="onLogin">登录</van-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {showFailToast, showSuccessToast, Toast} from 'vant';
import myaxios from "../Axios/myaxios";

const router=useRouter();
const sno = ref('');
const password = ref('');

const onLogin = () => {
    myaxios.post('/user/login', {
      sno: sno.value,
      password: password.value
    }).then(response=>{
      console.log(response.data)
      if(response.data!=null){
        localStorage.setItem('access-admin',JSON.stringify(response.data))//把信息存储到本地
        router.push('/')
      }
    })
};


</script>

<style scoped>
.login-page {
  display: flex;
  flex-direction: column;
}

.login-container {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
}

.login-button {
  margin-top: 20px;
  border-radius: 10px;
}

.van-border {
  border: 1px solid #969896;
  margin-top: 10px;
  border-radius: 10px;
}
</style>

这时候就都完事了

看运行代码结果

那就再来解释解释什么是JWT

jwt的全名称

JSON Web Token(JSON Web令牌)

JWT作用：

  • 身份验证：

    JWT常用于身份验证。在用户登录时，服务器生成一个JWT并返回给客户端。客户端每次请求时都带上这个JWT，服务器通过验证JWT来确认用户的身份。

  • 信息交换：

    由于JWT可以携带声明（claims），它们可以用来在不同的服务之间传递信息。这些声明可以包含用户的权限、角色等信息。

  • 安全性：

    JWT使用签名来确保内容的完整性和真实性。常见的签名算法有HMAC和RSA。通过签名，接收方可以验证消息是否被篡改过。

  • 无状态性：

    JWT是无状态的，所有的信息都包含在token本身中，不需要在服务器上存储会话信息。这使得JWT在分布式系统中尤其有用。

JWT的结构

JWT由三个部分组成，每一部分使用.分隔：

  1. Header（头部）：

    • 通常包含两部分：令牌类型（JWT）和使用的签名算法（如HMAC SHA256或RSA）。
{
  "alg": "HS256",
  "typ": "JWT"
}

  1. Payload（负载）：

    • 包含声明（claims）。声明是关于实体（通常是用户）和其他数据的声明。声明有三种类型：注册声明（如iss, exp, sub, aud）、公开声明和私有声明。
    • {
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

  2. Signature（签名）：

    • 用于验证消息在传输过程中是否被篡改。签名部分是使用header中指定的算法对header和payload进行签名得到的。HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

工作流程

  1. 用户通过认证（如登录）后，服务器生成JWT并返回给客户端。
  2. 客户端将JWT存储在本地（如localStorage或cookie）。
  3. 客户端每次请求时都将JWT包含在HTTP头部中（如Authorization: Bearer <token>）。
  4. 服务器接收到请求后，验证JWT的有效性和真实性。
  5. 服务器处理请求并返回响应。

程序员Shen_.li
关注
  • 15
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【SpringBoot】44、SpringBoot中整合JWT实现Token验证（整合篇）
Asurplus
02-28 21万+
什么是JWT？ Json web token (JWT)，是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准（(RFC 7519)，该 token 被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT 的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。 为什么需要JWT? 当我们开发前后端分离项目时，要求我们对用户会话状态要进行一
【SpringBoot】45、SpringBoot中整合JWT实现Token验证（注解篇）
Asurplus
02-28 21万+
前言 上篇文章，我们已经在 SpringBoot 中整合了 JWT 并实现了 Token 验证，那我们在实际应用中就会发现，如果每个 视图层（controller）都手动验证 token，代码就会显得特别臃肿，本篇文章主要为了解决该问题。 如果对整合 JWT 还不熟悉的朋友，可以先看看我的这篇博客：【SpringBoot】四十四、SpringBoot中整合JWT实现Token验证 自定义注解 1、创建自定义注解 package com.asurplus.common.annotation; import
JWT详解
热门推荐
baobao的博客
07-07 27万+
本文从本人博客搬运，原文格式更加美观，可以移步原文阅读：JWT详解 JWT简介 1.什么是JWT 在介绍JWT之前，我们先来回顾一下利用token进行用户身份验证的流程： 客户端使用用户名和密码请求登录 服务端收到请求，验证用户名和密码 验证成功后，服务端会签发一个token，再把这个token返回给客户端 客户端收到token后可以把它存储起来，比如放到cookie中 客户端每次向服务端请求资源时需要携带服务端签发的token，可以在cookie或者header中携带 服务端收到请求，然后去验证客户端请
jwt 的简单使用
不懂一休
07-02 1万+
文章目录1、简介2、使用场景3、jwt 优势4、JSON Web Token 结构①、HEADER②、PAYLOAD③、SIGNATURE5、测试 JWT①、导包②、运行6、总结 官网 1、简介 JSON Web Token(JWT)是一个基于 RFC 7519 的开放数据标准，它定义了一种宽松且紧凑的数据组合方式，使用 JSON 对象在各应用之间传输信息（信息加密即 jwe，签名即 jws）。 2、使用场景 授权： 简单说就是生成 token （使用较多） 这是使用 JWT 最常见的场景。用户登录后
Jwt简单使用
congge
04-11 9527
在分布式项目中，经常需要处理session共享的问题，解决的方式有很多，比如采用session或者cookie，或者redis进行存储都是解决方案，今天给大家介绍另一种比较轻量级的解决方式，就是使用jwt生成token，服务端进行加解密来处理； 首先要了解一下jwt的三个基本术语， Header Header是由以下这个格式的Json通过Base64编码（编码不是加密，是可以通过反编码的方式获取到...
JWT和Token之间的区别
分享思想，留下痕迹。
11-24 14万+
✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉✨特色专栏：🥭本文内容：JWT和Token之间的区别，欢迎大家访问📚个人知识库：，欢迎大家访问。
JWT简单使用
weixin_45794641的博客
11-05 3244
JWT简单使用 目录JWT简单使用一、概述1.JWT是什么2.JWT能做什么？3.为什么要使用JWT？二、JWT结构1.Header2.payLoad3.signature三、使用JWT1.JWT代码2.JWT的工具类封装3.SpringBoot整合JWT 一、概述 1.JWT是什么 ​ JWT全称是JSON Web Token，通过JSON形式作为Web应用中的令牌，用于在各方之间安全地将信息作为JSON对象传输，在数据传输过程中还可以完成数据加密、签名等相关处理。 2.JWT能做什么？ 授权 ​
一图带你简单理解JWT登录验证
niuglar的博客
01-29 2808
JWT 简介 JWT (JSON Web Token) 是一套特别流行于分布式系统采用的授权标准 ，在采用加密等手段保证安全高效的同时，其基于JSON做为权限认证令牌的特性可以使其携带诸多非敏感数据，其所携带的数据可以确保授权的灵活高效。 JWT组成 一个JWT实际上就是一个字符串，它由三部分组成，头部、载荷与签名。 JSON Web Tokens是如何工作的 下面画了一张图，可以简单理解jwt在登录验证中做了些什么。 JWT简单理解 简单来说，JWT就是一套生产令牌和验证令牌的策略，它经过可靠的加密方式
手牵手带你整合Shiro+JWT实现认证功能
小咸白鱼的博客
11-23 7601
需要对 shiro 和 jwt 有一定的了解。 Shiro和JWT的区别 ​ 整合之前需要清楚Shiro和JWT的区别。 首先Shiro是一套安全认证框架，已经有了对token的相关封装。而JWT只是一种生成token的机制，需要我们自己编写相关的生成逻辑。 其次Shiro可以对权限进行管理，JWT在权限这部分也只能封装到token中，需要我们自己实现处理逻辑。 最后 Shiro是基于session保持会话 的，也就是说是有状态的。而JWT则是无状态的（服务端不保存session，而是生成t.
JWT--使用/教程/实例
IT利刃出鞘的博客
10-17 2628
原文网址： 简介 说明 JWT是常用的TOKEN工具，本文介绍JWT知识。包括：什么是JWT、JWT的消息组成、JWT实战。 官网 官网：JSON Web Tokens - jwt.io （可生成/解析 Token） 简介 JWT简介 什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519)。JWT将用户信息加密到token里，服务器不保存任何用户信息。服务器通...
django-rest-api-jwt-authentication:django rest框架，带有自定义用户的简单jwt auth
04-15
django-rest-api-jwt-authentication django rest框架，带有自定义用户的简单jwt auth专案要求* Python * Django套件安装转到博客所在的项目文件夹（使用控制台，使用cd命令），然后执行以下命令。 创建虚拟环境并...
基于JWT.NET的使用(详解)
08-28
通常直接使用HMAC SHA256，其它还有RS256等完整的头部就像下面这样的JSON：{"alg": "HS256","typ": "JWT"} 4. Payload（载荷） payload就是存放有效信息的地方。这个名字像是特指飞机上承载的货品，这些有效信息...
ermahgerd-emberjs-jwt-token：Ember 3+，带有Rails JWT后端的Ember简单身份验证
02-05
自述文件-ermahgerd-emberjs-jwt-token 这个Ember应用程序通过与Rails API服务器进行通信。开发-入门您需要以下内容：考虑使用 确保安装CLI yarn global ember-cli 通过Testem运行的单元测试需要Chrome首次设置git ...
jwt的实现 ，实战项目可直接使用
07-13
JWT（JSON Web Token）是一种开放的标准（RFC 7519），定义了一种紧凑的、自包含的方式来安全地在各方之间传输信息作为一个 JSON 对象。这个信息可以被验证和信任，因为它是数字签名的。JWT 在现代Web应用中广泛用于...
jwt：一个简单的库，可与JSON Web令牌和JSON Web签名一起使用
02-05
一个简单的库，可基于使用JSON Web令牌和JSON Web签名。 安装 Package在上，您可以使用进行安装。 composer require lcobucci/jwt 文献资料 该文档位于 。 受Auth0支持 如果你想安全令牌的身份验证添加到您PHP...
Java-Lambda
最新发布
lizhiwei21的博客
07-21 172
lambda表达式可以理解为对匿名内部类的一种简化 , 但是本质是有区别的面向对象思想 :强调的是用对象去完成某些功能函数式编程思想 :强调的是结果 , 而不是怎么去做。
Promise 详解（原理篇）
山重水复疑无路，柳暗花明又一村。
07-20 491
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
JVM-垃圾回收与内存分配
m0_50846237的博客
07-19 1139
JVM-垃圾回收与内存分配
接口防刷！利用redisson快速实现自定义限流注解
架构师小吴的博客
07-18 1168
如登录接口，当用户使用手机号+验证码登录时，一般我们会生成6位数的随机验证码，并将验证码有效期设置为1-3分钟，如果对登录接口不加以限制，理论上，通过技术手段，快速重试100000次，即可将验证码穷举出来。解决思路：对登录接口加上限流操作，如限制一分钟内最多登录5次，登录次数过多，就返回失败提示，或者将账号锁定一段时间。在日常开发中，一些重要的对外接口，需要加上访问频率限制，以免造成资��损失。ok，通过以上两步，即可完成我们的限流注解了，下面通过一个接口验证下效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值