jwt工具类代码
public class JwtUtil {
private static final String KEY = "练习jwt";
//接收业务数据,生成token并返回
public static String genToken(Map<String, Object> claims) {
return JWT.create()
.withClaim("claims", claims)
.withExpiresAt(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 12))
.sign(Algorithm.HMAC256(KEY));
}
//接收token,验证token,并返回业务数据
public static Map<String, Object> parseToken(String token) {
return JWT.require(Algorithm.HMAC256(KEY))
.build()
.verify(token)
.getClaim("claims")
.asMap();
}
}
JWT依赖
//jwt依赖 在pom文件使用
<!-- jwt令牌-->
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>4.3.0</version>
</dependency>
JWT 是一种用于在网络中传递信息的安全方式，它由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。
genToken 方法
用于生成 JWT，它接收一个 claims 参数，该参数是一个包含业务数据的 Map 对象。这个方法使用给定的业务数据和过期时间，使用密钥 KEY 对 JWT 进行签名，并返回生成的 JWT 字符串。
parseToken 方法
用于解析 JWT，它接收一个 JWT 字符串作为参数，并使用密钥 KEY 验证 JWT 的签名和有效性。如果验证通过，它会返回包含业务数据的 Map 对象。
很明显JWT常用的就是token的解析和生成，在用户登录的时候可以使用getToken，将User对象中重要的信息封装到token中。比如下面一段业务逻辑:
if (Md5Util.getMD5String(password).equals(user.getPassword())){
// 返回Token令牌
Map<String, Object> claims = new HashMap<>();
claims.put("id",user.getId());
claims.put("username",user.getUsername());
String token = JwtUtil.genToken(claims);
// 把token存到redis
ValueOperations<String, String> stringStringValueOperations = stringRedisTemplate.opsForValue();
stringStringValueOperations.set(user.getId().toString(),token,1, TimeUnit.HOURS);
return Result.success(JwtUtil.genToken(claims));
首先生成一个map集合，用于封装user的键值对，随后将其加密成token形式，考虑到缓存类型数据，可以使用redis数据库进行缓存，并设置好过期时间，用于后期的更新密码后token的校验。最后返回给前端一个data数据token。
前端如何进行存储token？
我们在前端建立一个store包，创建一个token.js,写下以下代码：
import {
defineStore } from "pinia";
import {
ref} from 'vue';
/*
defineStore参数描述：
第一个参数：给状态起名，具有唯一性
第二个参数：函数，可以把定义该状态中拥有的内容
defineStore返回值描述：
返回的是一个函数，将来可以调用该函数，得到第二个参数中返回的内容
*/
export const useTokenStore = defineStore('token',()=>{
//1.定义描述token
const token = ref('')
//2.定义修改token的方法
const setToken = (newToken)=>{
token.value = newToken
}
//3.定义移除token的方法
const removeToken = ()=>{
token.value=''
}
return {
token,setToken,removeToken
}
}
,
//参数持久化
{
persist:true
}
)
vue界面登录函数中调用
//导入token状态
import {
useTokenStore } from '@/store/token.js'
//调用useTokenStore得到状态
const tokenStore = useTokenStore();
//用于登录的事件函数
const login = async()=>{
let result = await userLoginService(registerData.value);
ElMessage.success(result.message)
//保存token
tokenStore.setToken(result.data)
router.push('/layout')
}
其实很明显。在前端这里这个代码逻辑也是可以记录的，以后当作像后端工具类一样直接调用即可。
