jwt令牌的基本使用，前端如何存储token

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')
}

其实很明显。在前端这里这个代码逻辑也是可以记录的，以后当作像后端工具类一样直接调用即可。