【Vue3】前端使用JWT令牌技术的实践方案

目录

技术介绍

简单介绍：

详细介绍：

操作流程

1.后端在登录响应里返回jwt

2.前端将该变量存入浏览器当中

3.前端使用jwt

请求的时候作为请求头

解码令牌内信息

---

技术介绍

简单介绍：

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