Vue2+SpringBoot 在线商城 02-前后端登录功能对接

1.3 实现 JwtUtil 工具类

1.3.1 定义相关常量

将过期时间设置为 24 小时

private static long EXPIRATION_TIME = 3600000 * 24; // 过期时间：24 小时（3600000 毫秒=1 小时）

暂时先将密钥写死

private static String SECRET = "MDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjY34DFDSSSd";

定义两个常量

private static final String USER_ID = "id"; // 用户 ID 在 JWT 中的 key
private static final String TIME = "currentTime"; // 时间戳在 JWT 中的 key

1.3.2 实现 token 生成方法

public static String generateToken(String id) {
    HashMap<String, Object> map = new HashMap<String, Object>(); // 创建一个 hashmap 存储信息
    map.put(USER_ID, id); // 将用户 ID 放入
    String jwt = Jwts.builder()
            .setClaims(map) // 把用户信息放入 JWT
            .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME)) // 设置过期时间
            .signWith(SignatureAlgorithm.HS512, SECRET) // 使用 HS512 算法和密钥签名
            .compact(); // 生成最终的 JWT 字符串
    return jwt;
}

这个 put 动作，只在 Java 内存里操作，跟 JWT 还没关系，可以 put 很多次，放很多信息。 而后面的 setClaims 动作，则是将备好的信息交给 JWT 生成器，而且只能设置一次 claims。

1.3.3 实现带时间戳的 token 生成方法

代码逻辑和刚刚的 token 生成方法基本一致。多存储了一个当前的时间戳。

public static String generateTokenByTime(String id) {
    HashMap<String, Object> map = new HashMap<String, Object>();
    map.put(USER_ID, id);
    map.put(TIME, DateTool.getCurrTime());
    String jwt = Jwts.builder().setClaims(map)
            .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
            .signWith(SignatureAlgorithm.HS512, SECRET).compact();
    return jwt;
}

1.3.4 实现 token 验证方法

public static Result validateToken(String token) {
    Result result = new Result();
    if (token == null || "".equals(token.trim())) {
        result.fail("missing token");
        return result;
    }
    try {
        Map<String, Object> body = Jwts.parser().setSigningKey(SECRET)
                .parseClaimsJws(token).getBody();
        Object idObj = body.get(USER_ID);
        String id = idObj == null ? null : String.valueOf(idObj);
        if (id == null || "".equals(id.trim())) {
            result.fail("Wrong token without id");
            return result;
        }
        result.setData(id);
        return result;
    } catch (Exception e) {
        result.fail(e.toString());
        return result;
    }
}

1.4 完善 User 实体类

刚刚为了测试前后端的连接，只设计了 name 字段，现在将其他需要的也补充上来，包括对应的 getter 和 setter 方法。

package com.xmut.backend.entity;

/**
 * 测试用实体类
 */
public class User {
    // 用于 postJson 测试
    private String name;
    // 用于 login 测试
    private String id;
    private String username;
    private String password;
    private String salt;

    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
    public String getId() { return id; }
    public void setId(String id) { this.id = id; }
    public String getUsername() { return username; }
    public void setUsername(String username) { this.username = username; }
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
    public String getSalt() { return salt; }
    public void setSalt(String salt) { this.salt = salt; }
}

1.5 实现一个简单的 UserController

@RequestBody 将请求的 JSON 体自动转换为 User 对象

package com.xmut.backend.controller;
import cn.hutool.crypto.digest.DigestUtil;
import com.xmut.backend.entity.User;
import com.xmut.backend.utils.JwtUtil;
import com.xmut.backend.utils.Result;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * 登录接口
 * 说明：目前先不接数据库，先写死一个账号，跑通从登录到返回 token 的过程
 */
@RestController
@RequestMapping("/kmall/user")
public class UserController {
    // 先写死一个账号
    private static final String FIXED_ID = "1";
    private static final String FIXED_USERNAME = "admin";
    private static final String FIXED_SALT = "kmall_salt";
    private static final String FIXED_PASSWORD_MD5 = DigestUtil.md5Hex("123456" + FIXED_SALT);

    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        Result result = new Result();
        // 从 User 对象中获取用户名和密码
        String username = user == null ? null : user.getUsername();
        String password = user == null ? null : user.getPassword();
        // 检查用户名是否为 null 或空字符串
        if (username == null || "".equals(username.trim())) {
            result.fail("用户不存在");
            return result;
        }
        // 验证用户名是否等于固定的"admin"，也就是刚刚写死的用户名
        if (!FIXED_USERNAME.equals(username.trim())) {
            result.fail("用户不存在");
            return result;
        }
        // 计算用户输入密码的 MD5 值，同样也是要加上盐值
        String md5Password = DigestUtil.md5Hex((password == null ? "" : password) + FIXED_SALT);
        // 比较计算出的 MD5 值与预先计算的固定 MD5 值，如果不匹配，返回密码错误
        if (!FIXED_PASSWORD_MD5.equals(md5Password)) {
            result.fail("密码错误");
            return result;
        }
        // 成功处理
        String token = JwtUtil.generateTokenByTime(FIXED_ID);
        // 调用 JWT 工具类生成 token，传入刚刚写死的 FIXED_ID
        result.setMessage("登录成功");
        result.setData(token);
        // 将生成的 token 放入 result 的 data 字段
        return result;
    }
}

二、前端实现

2.1 实现用户登录的接口 /api/userApi.js

import { postJson } from './index'
// 用户相关接口（module 层）
// 后端：POST /kmall/user/login
export function loginRequest(username, password) {
    return postJson('/kmall/user/login', {
        username: (username || '').trim(),
        password: (password || '').trim()
    })
}

2.2 添加相关的测试按钮

2.3 添加必要的数据、函数

先填充好正确的测试账号和密码，可以方便测试。

testUsername: 'admin',
testPassword: '123456',

testLoginRequest: function () {
    var self = this // 保存 this 引用
    var u = (self.testUsername || '').trim() // 获取用户名
    var p = (self.testPassword || '').trim()
    loginRequest(u, p) // 调用登录函数，也就是刚刚在 userApi 里面定义的
        .then(function (response) {
            // 当 loginRequest 成功完成时，执行此回调函数
            var result = response.data // 提取响应数据
            self.handleApiResult(result) // 调用结果处理方法
        })
        .catch(function (error) {
            // 处理异步失败
            self.lastResultText = 'error: ' + error // 更新错误显示
            console.log('error:' + error) // 在控制台输出错误信息
        })
},

三、测试

3.1 输入正确的账号密码

此处 data 返回的是一个 JWT 的 token 字符串，由三段组成（用.分隔）：

• 第 1 段：header（说明用的算法，比如 HS512）
• 第 2 段：payload（放进去的内容，比如 id，currentTime, exp）
• 第 3 段：signature（用密钥做的签名，用来防篡改）

可以解码看看：

3.2 输入错误的账号/密码

得到对应的错误提示