东胜网站制作,关于建设网站的图,中英文外贸网站模版,电商视觉设计文章目录 前言一、JWT简单介绍二、token校验设计思路三、使用步骤Springboot部署JWT引入依赖#xff1a;创建登录实体类后端#xff1a;LoginController.java路由守卫函数 四、问题 前言
项目版本#xff1a; 后端#xff1a; Springboot 2.7、 Mybatis-plus、Maven 3.8.1… 文章目录 前言一、JWT简单介绍二、token校验设计思路三、使用步骤Springboot部署JWT引入依赖创建登录实体类后端LoginController.java路由守卫函数 四、问题 前言
项目版本 后端 Springboot 2.7、 Mybatis-plus、Maven 3.8.1 数据库MySQL 8.0 前端Vue3、Axois 1.6.0 、Vite 4.5.0、Element-Plus、Router-v4
一、JWT简单介绍
JWT 全称 JSON Web Token是一种基于 JSON 的数据对象通过技术手段将数据对象签名为一个可以被验证和信任的令牌Token在客户端和服务端之间进行安全的传输。
二、token校验设计思路 1. 首先用户从登录请求发往后端后后端生成token并将token返回给前端。 2. 前端拿到后端生成的token后保存在localStorage中在token时效内用户拿着这个token访问系统所有的功能。 3. 一旦token失效系统将会强制用户退出系统直到重新登录才能获取新的token.如此循环。
三、使用步骤
Springboot部署JWT
在整个JWT token的周期中只需要在用户登录的时候生成token其余访问页面均用vue3的路由守卫拦截用户向后端发起的请求中都会携带token后端只有token校验合法后才会执行具体的业务。
引入依赖 dependencygroupIdio.jsonwebtoken/groupIdartifactIdjjwt/artifactIdversion0.9.1/version/dependency创建登录实体类
package com.fy36.hotelmanage.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.ToString;Data
ToString
TableName(value tbadmin)
public class Admin {private String username;private String password;TableId(type IdType.AUTO)private Long Id;TableField(exist false) //token字段不映射到数据库只是用来携带。private String token;}上面的TableFiled existfalse表示不对照对应的sql字段因为token校验并不存到数据库中只是用来存储到用户实体中发往前端校验。如果不添加该字段将会报错Unkown column if filed list in ‘tbadmin.token’.如下是admin表中的字段设计。 创建JwtUtils.java
public class JWTUtils {private static long TIME 1000 * 5; //token有效期以毫秒为单位所以这里token有效期为5s.private static String SIGNATURE 2786; //私钥签名public static String createToken(Admin admin) {JwtBuilder jwtBuilder Jwts.builder(); //构建jwt对象//配置headerString jwtToken jwtBuilder//配置hader.setHeaderParam(alg, HS256) //签名算法.setHeaderParam(typ, JWT) //TYPE 为JWT//payload载荷不要加入隐私信息.claim(username, admin.getUsername()).setExpiration(new Date(System.currentTimeMillis() TIME)) //假定token有效时间为24x小时//signature.signWith(SignatureAlgorithm.HS256, SIGNATURE)//拼接该三部分构成一个完整的token.compact();return jwtToken;}public static boolean checkToken(String token) {if (token null) {return false;}try {JwsClaims claimsJws Jwts.parser().setSigningKey(SIGNATURE).parseClaimsJws(token);} catch (Exception e) {e.printStackTrace();return false;}return true;}
}如下是前端点击登录按钮后触发的登录方法
//测试请求方法
const login function () {//测试样例2api.post(/login, {...formLabelAlign,}).then(function (res) {if (res.data.code 200) {ElMessage.success(登录成功);//用户登录成功后将后端生成的token放到localStorage中。//如果收到了后端发送过来token那么存储token并跳转到系统界面。if (res.data.data.token) {console.log(输出res);console.log(res.data);localStorage.setItem(token_access,JSON.parse(JSON.stringify(res.data.data.token)));}//存储好token后进入系统。router.push(/home);} else {ElMessage.error(用户名或密码错误请重新输入);}});
};用户点击后向后端发送请求对应/login接口
后端LoginController.java
当用户名和密码都正确后使用JwtUtils.class 生成token并将它存放到Admin实体类中的token 字段中发往前端。 PostMapping(/login)public ApiResult login(RequestBody Admin admin) {Admin adminRes loginService.adminLogin(admin);if (adminRes ! null) {//设置token发往前端口adminRes.setToken(JWTUtils.createToken(adminRes));System.out.println(后端生成的token为:\n adminRes.getToken());return ApiResultHandler.buildApiResult(200, 请求成功, adminRes);} else return ApiResultHandler.buildApiResult(400, 请求失败, 用户名账号或密码错误);/**
校验token
**/GetMapping(/checkToken)public boolean checkToken(HttpServletRequest request) {System.out.println(reqeust:---------);System.out.println(request.toString());String token request.getHeader(token);System.out.println(本地拿到的前端token为);System.out.println(token);token token.replaceAll(\, );System.out.println(处理后的token为);System.out.println(token);boolean res JWTUtils.checkToken(token);System.out.println(校验结果 res);return res;}OK此时前端收到了token会将它存放在localStorage中。
对应前端的login片段为 localStorage.setItem(token_access,JSON.parse(JSON.stringify(res.data.data.token)));JSON.stringify()方法可以用于将JavaScript对象转换为字符串以便在网络上进行传输或存储。它还可以用于将JavaScript对象转换为字符串以便进行数据的序列化和持久化存储。 如图在谷歌浏览器F12打开控制台–Application中可以查看存放的token. (token不带引号) 此时用户成功进入系统可以携带有效时期的token进行访问系统功能但是用户每次点击系统其他功能时将会校验token是否合法主要检测的是token时效如果超过这个时效将会强制退出。那么怎么让系统在每次用户请求时都能自动发送给后端检验token呢
这里用到的是router路由守卫函数router.beforeEach((to, from, next)
路由守卫函数写在了main.js中.当用户每次调用后端服务时都会携带已保存的token发往后端这里将token放入了请求头中后端使用HttpServletRequest 来获取请求头.代码看上面的LoginController.class
路由守卫函数
路由守卫函数
//进行任何跳转前都需要进行该方法的调用。
...
const router createRouter({history: createWebHistory(),routes,
});router.beforeEach((to, from, next) {if (to.path /login) {// 登录或者注册才可以往下进行window.localStorage.removeItem(token_access);//移除tokennext();} else {// 获取 tokenlet admin_token JSON.stringify(window.localStorage.getItem(token_access));// token 不存在if (admin_token null || admin_token ) {ElMessage.error(您还没有登录请先登录);next(/login);} else {//校验token合法性api.get(/checkToken, {headers: {token: admin_token,},}).then(function (res) {if (res.data) {//token校验发现合法console.log(token合法);// router.push(/home);} else {ElMessage.error(token校验不合法请重新登录);localStorage.removeItem(token_access);router.push(/login);}}).catch(function (error) {ElMessage.error(token已失效重新登陆);console.log(error);});next();}}
});有一点需要注意的是token在前后端交互的过程中格式的变化如下图是控制台输出的token交互中的变化。token放到header的方法博客
本地拿到的前端token为
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjExMSIsImV4cCI6MTY5OTQxOTAxMn0.Y7mbTlsp5dJ1-hKE8RCtviZwFIC3E_CdjhFPDsMT5Ws处理后的token为
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjExMSIsImV4cCI6MTY5OTQxOTAxMn0.Y7mbTlsp5dJ1-hKE8RCtviZwFIC3E_CdjhFPDsMT5Ws在token校验中往往不是token时效导致校验失败而因为前后端交互的token的格式不一致导致校验失败。前端传入的token需要在后端去除两边的双引号。
StackOverflow的解决方案 Storing my API token in local storage is wrapping the token in double quotes
四、问题
问题1io.jsonwebtoken.UnsupportedJwtException: Signed Claims JWSs are not supported 问题就是不支持已签名的声明JWS。 如果使用 Jwts.builder() 创建token在解析时就需要使用 parseClaimsJws(token) 而不是 parseClaimsJwt(token) .
问题2:JWT signature does not match locally computed signature. JWT validity cannot be asserted and should not be trusted. 中文意思是JWT签名与本地计算的签名不匹配。无法断言JWT有效性不应信任JWT有效性 出现这种异常的情况正如上面所说token是一串字符串且不带双引号,后端需要进行 token token.replaceAll(\, );处理。
问题3Cannot access ‘res’ before initialization 请根据提示查看这个result变量是否在 代码下文 中是否重新进行了let res 重新定义之类的操作。
问题4使用localStorage.getItem方法获取token时发现token的形式外围包围了一层引号
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c这是因为没有使用JSON.parse将该字符串转化为javascript对象。
改写为window.localStorage.getItem(JSON.stringify(token));问题5JWT expired at 2023-11-07T15:42:27Z. Current time: 2023-11-07T15:42:27Z, a difference of 105 milliseconds. Allowed clock skew: 0 milliseconds. 这说明token 已经过期了具体是在JWTUtils.java中的 String jwtToken jwtBuilder//配置hader.setHeaderParam(alg, HS256) //加密算法.setHeaderParam(typ, JWT) //TYPE 为JWT//payload载荷不要加入隐私信息.claim(username, admin.getUsername()).setExpiration(new Date(System.currentTimeMillis() TIME)) //假定token有效时间为24x小时//signature.signWith(SignatureAlgorithm.HS256, SIGNATURE)//拼接该三部分构成一个完整的token.compact();中的setExpiration 这里new Date是毫秒级别的当前时间该语句含义就是在当前时间之后的TIME毫秒是有效的。之前这里改了之后还是token过期尝试先把TIME改的更大然后重新运行一下Springboot。另外还有一个token时间不生效的原因是当前已经登录的用户token时效已经设定此时需要执行· localStorage.removeItem(token_access) 来删除掉原有的token重新登陆一次新token就会根据当前时间来修改。
