目录
技术介绍
简单介绍：
JWT令牌是一种用户校验机制，在登录后服务器会返回用户一个JWT令牌（相当于门票），用户根据这个令牌（门票）可以在一定时限内访问网站资源。但令牌（门票）一过期用户就需要重新登录。
详细介绍：
【深度知识】JSON Web令牌(JWT)的原理，流程和数据结构-腾讯云开发者社区-腾讯云
操作流程
1.后端在登录响应里返回jwt
//UserController.java
@PostMapping("/doLogin")
public R<String> userLogin(@RequestBody LoginInfo loginInfo){
User user = userService.login(loginInfo);
if(user!=null){
Map<String, Object> claims = new HashMap<>();
claims.put("userId",user.getUserId());
claims.put("userName",user.getUserName());
String jwt = JwtUtils.generateJwt(claims);
return R.success(jwt);
}
return R.error("用户名或密码错误");
}- 使用前需要导入JwtUtils这个类
2.前端将该变量存入浏览器当中
const response = await axios.post(`${config.url}doLogin`, {
userName: this.username,//注意这里的变量名要和后端保持一致，name的n也要大写
password: this.password
});
console.log('Response:', response); // 打印原始响应，便于调试
if (response.data.code === 200) {
const jwtToken = response.data.data; // 确保正确访问 token
localStorage.setItem('jwt', jwtToken); // 保存 JWT 到 localStorage
this.$router.push('/'); // 重定向到主页
} else {
this.error = true;
this.errorMessage = response.data?.message || '登录失败';
alert(response.data.msg)
}- 需要确保response.data.data里面的是后端返回的jwt的值，此处需要灵活改变
- localStroage里面是在浏览器本地设置了一个键值对，此处的键为jwt：
- 可以直接打开开发者工具并在【应用-本地存储空间-前端运行端口号】处查看：
3.前端使用jwt
请求的时候作为请求头
比如在main.js文件当中——
//main.js
axios.interceptors.request.use(
(config) => {
const token = localStorage.getItem('jwt');
if (token) {
config.headers.token = `${token}`;//注意看后端是不是只认token
}
return config;
},
);- getItem即为获取浏览器里面之前存储过的键为jwt的值
- header.token是指在每次请求里面的header里面的token里面的值（实际开发中可能采取其他形式的命名）
解码令牌内信息
可以写一个工具函数（在此仅供参考）
export default decodeJWT2Obj;
function decodeJWT2Obj(token) {
const parts = token.split('.');
const header = atob(parts[0]);
const payload = atob(parts[1]);
return {
header: JSON.parse(header),
payload: JSON.parse(payload)
}
}