SpringBoot整合jwt+redis+随机验证码+Vue的登录功能
一、运行效果展示
！注意：前端的Vue项目中要引入element-ui和axios
# npm安装element-ui、axios
npm insatll element-ui -S
npm install axios -S
# 在main中引入
// 引入ElementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) // 使用axios import axios from 'axios' axios.defaults.baseURL = 'http://127.0.0.1:' Vue.prototype.$axios = axios
二、环境依赖准备
1、引入pom依赖
com.auth0
java-jwt
3.18.2
org.springframework.boot
spring-boot-starter-data-redis
org.projectlombok
lombok
true
2、配置yaml
server:
port: 8080
spring:
application:
name: login-service # 服务名称
redis:
host: 127.0.0.1
port: 6379
password: 123456
database: 0 #操作的是0号数据库
jedis:
#Redis连接池配置
pool:
max-active: 8 #最大连接数
max-wait: 1ms #连接池最大阻塞等待时间
max-idle: 4 #连接池中的最大空闲连接
min-idle: 0 #连接池中的最小空闲连接三、jwt生成与验证token
1、编写token工具类TokenUtils
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.TokenExpiredException;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Component;
import java.util.Calendar;
import java.util.concurrent.TimeUnit;
@Component
@Data
@Slf4j
public class TokenUtils {
@Autowired
private StringRedisTemplate stringRedisTemplate;
// 创建Token
public String createToken(String userName, String hostIp) {
//时间工具类
Calendar instance = Calendar.getInstance();
//设置过期时间 单位：SECOND秒 3个小时失效
instance.add(Calendar.SECOND, 3 * 60 * 60);
//签名（自定义）
Algorithm algorithm = Algorithm.HMAC256("buliangshuai");
// 创建token
JWTCreator.Builder builder = JWT.create()
//添加键值对数据
.withClaim("userName", userName)
//添加过期时间
.withExpiresAt(instance.getTime());
// 选择签名算法HMAC256，添加密钥字符串签名
String token = builder.sign(algorithm);
//输出token
System.out.println("用户" + userName + "的token是：" + token);
// 将token存入redis
ValueOperations forValue = stringRedisTemplate.opsForValue();
// 存入主机IP和token，指定过期时间
forValue.set(hostIp+"token", token, 3 * 60 * 60, TimeUnit.SECONDS);
return token;
}
// 验证Token
public boolean verifyToken(String token, String hostIp) {
try {
// 根据主机地址和redis中存储的值比对判断token是否正确
String redisToken = stringRedisTemplate.boundValueOps(hostIp + "token").get();
if(!token.equals(redisToken)){
return false;
}
} catch (TokenExpiredException e) {
//令牌过期抛出异常
System.out.println("令牌过期");
return false;
} catch (Exception e) {
//token非法验证失败抛出异常
System.out.println("检验失败");
return false;
}
return true;
}
}
2、编写token接口控制类
import com.blywl.common.utils.TokenUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@RestController
@RequestMapping("/test")
@Slf4j
@CrossOrigin // 跨域
public class TestController {
@Autowired
private TokenUtils tokenUtils;
// 创建token
@PostMapping("/token")
public String createToken(@RequestParam("userName") String userName, HttpServletRequest request){
return tokenUtils.createToken(userName, request.getRemoteAddr());
}
// 验证token
@PostMapping("/verifyToken")
public boolean verifyToken(@RequestParam("token") String token, HttpServletRequest request){
return tokenUtils.verifyToken(token, request.getRemoteAddr());
}
}3、前端api调用
import axios from 'axios'
let hostIp= "http://127.0.0.1:"
export default {
// 生成用户Token
createToken(data) {
return axios({
url: hostIp + '8080/test/token',
params: data,
method: 'post'
})
}
}
四、随机验证码
1、验证码工具类codeUtils
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
/**
* code验证码生成工具类
*/
public class CodeUtils {
/**
* 生成验证码图片的宽度
*/
private int width = 100;
/**
* 生成验证码图片的高度
*/
private int height = 30;
/**
* 字符样式
*/
private String[] fontNames = { "宋体", "楷体", "隶书", "微软雅黑" };
/**
* 定义验证码图片的背景颜色为白色
*/
private Color bgColor = new Color(255, 255, 255);
/**
* 生成随机
*/
private Random random = new Random();
/**
* 定义code字符
*/
private String codes = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
/**
* 记录随机字符串
*/
private String text;
/**
* 获取一个随意颜色
* @return
*/
private Color randomColor() {
int red = random.nextInt(150);
int green = random.nextInt(150);
int blue = random.nextInt(150);
return new Color(red, green, blue);
}
/**
* 获取一个随机字体
*
* @return
*/
private Font randomFont() {
String name = fontNames[random.nextInt(fontNames.length)];
int style = random.nextInt(4);
int size = random.nextInt(5) + 24;
return new Font(name, style, size);
}
/**
* 获取一个随机字符
*
* @return
*/
private char randomChar() {
return codes.charAt(random.nextInt(codes.length()));
}
/**
* 创建一个空白的BufferedImage对象
*
* @return
*/
private BufferedImage createImage() {
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = (Graphics2D) image.getGraphics();
//设置验证码图片的背景颜色
g2.setColor(bgColor);
g2.fillRect(0, 0, width, height);
return image;
}
public BufferedImage getImage() {
BufferedImage image = createImage();
Graphics2D g2 = (Graphics2D) image.getGraphics();
StringBuffer sb = new StringBuffer();
for (int i = 0; i < 4; i++) {
String s = randomChar() + "";
sb.append(s);
g2.setColor(randomColor());
g2.setFont(randomFont());
float x = i * width * 1.0f / 4;
g2.drawString(s, x, height - 8);
}
this.text = sb.toString();
drawLine(image);
return image;
}
/**
* 绘制干扰线
*
* @param image
*/
private void drawLine(BufferedImage image) {
Graphics2D g2 = (Graphics2D) image.getGraphics();
int num = 5;
for (int i = 0; i < num; i++) {
int x1 = random.nextInt(width);
int y1 = random.nextInt(height);
int x2 = random.nextInt(width);
int y2 = random.nextInt(height);
g2.setColor(randomColor());
g2.setStroke(new BasicStroke(1.5f));
g2.drawLine(x1, y1, x2, y2);
}
}
public String getText() {
return text;
}
public static void output(BufferedImage image, OutputStream out) throws IOException {
ImageIO.write(image, "JPEG", out);
}
}
2、编写验证码接口控制类
import com.blywl.common.utils.CodeUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
@RestController
@RequestMapping("/login")
@CrossOrigin // 跨域
public class LoginController {
@Autowired
private StringRedisTemplate stringRedisTemplate;
/**
* 生成验证码图片
*/
@GetMapping("/code")
public void code(HttpServletRequest request, HttpServletResponse res) throws IOException {
CodeUtils code = new CodeUtils();
// 生成验证码图片
BufferedImage image = code.getImage();
// 将验证码text存入redis中
String text = code.getText();
ValueOperations forValue = stringRedisTemplate.opsForValue();
String hostIp = request.getRemoteAddr() + "code";
// 主机,code,3分钟过期
forValue.set(hostIp, text, 3 * 60, TimeUnit.SECONDS);
// 响应验证码图片
CodeUtils.output(image, res.getOutputStream());
}
/**
* 登录
*/
@PostMapping("/login")
public String login(@RequestParam("code") String code, HttpServletRequest request) {
// 根据主机地址和redis中存储的值比对判断验证码是否正确
String hostIp = request.getRemoteAddr() + "code";
String redisCode = stringRedisTemplate.boundValueOps(hostIp).get();
System.out.println("redisValue:" + redisCode);
if (code.equalsIgnoreCase(redisCode)) {
return "登录成功！";
}
return "登录失败~";
}
} 3、前端api调用
// 登录
async login(data) {
return axios({
url: hostIp + '8080/login/login',
params: data,
method: 'post'
})
},
五、完整前端代码
Login.vue
登录页面
登录
注册
登录
注册
重置
loginApi.js
import axios from 'axios'
let hostIp= "http://127.0.0.1:"
export default {
// 登录
async login(data) {
return axios({
url: hostIp + '8080/login/login',
params: data,
method: 'post'
})
},
// 生成用户Token
createToken(data) {
return axios({
url: hostIp + '8080/test/token',
params: data,
method: 'post'
})
}
}