登陆状态检测设计:Vue3+TypeScript+JWT+SpringSecurity+Redis+SpringBoot+Axios二次封装
大致思路如下:
用户进行登录==》后台检测是否存在该用户信息=》通过JWT生成Token=》将信息存入Redis并设计Token与Redis的失效时间
用户访问别的接口=》SpringSecurity进行拦截=》自定义拦截器检验(详细设计在后文)=》反馈状态码给前端=》前端通过状态码进行处理
实现代码如下
用户登录接口代码
@Operation(summary = "用户登录接口", description = "通过账号密码进行用户登录")
@PostMapping("/userLogin")
public Result userLogin(@RequestBody User user){
User userInfo = userService.UserLogin(user);
if(userInfo!=null){
JwtUtil jwtUtil = new JwtUtil();
// 生成JWT
String token = jwtUtil.generateToken(userInfo.getName(), userInfo.getType().toString());
// 记录用户信息进redis
String UserInfoKey = "user:loginInfo:" + userInfo.getName();
HashMap<String, String> userInfoMap = new HashMap<>();
userInfoMap.put("name", userInfo.getName());
userInfoMap.put("type", userInfo.getType().toString());
userInfoMap.put("token", token);
// 使用 Hash 存储用户信息
redisTemplate.opsForHash().putAll(UserInfoKey, userInfoMap);
// 设置 Hash 的过期时间
redisTemplate.expire(UserInfoKey, 30, TimeUnit.MINUTES);
return Result.ok().dataMap("token", token).dataMap("user", userInfo); // 返回token和用户信息
}
else{
return Result.error().message("账号或密码错误");
}
}
JWT配置代码
package cn.ryanfan.virtulab_back.config;
import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.auth0.jwt.JWTVerifier;
import org.springframework.stereotype.Component;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Component
public class JwtUtil {
private static final String SECRET_KEY = "HandSomeLYF"; // 请替换成你的秘钥
private static final long EXPIRATION_TIME = 1000 * 60 * 60 * 10; // 10小时
private final long REFRESH_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30; // 30天
// 生成Token(根据用户名、角色)
public String generateToken(String username, String role) {
return JWT.create()
.withSubject(username)
.withClaim("role", role)
.withExpiresAt(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
.sign(Algorithm.HMAC256(SECRET_KEY));
}
// 生成Refresh Token
public String generateRefreshToken(String username) {
return JWT.create()
.withSubject(username)
.withExpiresAt(new Date(System.currentTimeMillis() + REFRESH_EXPIRATION_TIME))
.sign(Algorithm.HMAC256(SECRET_KEY));
}
// 通过密钥验证Token,并返回结构对象
public DecodedJWT verifyToken(String token) {
JWTVerifier verifier = JWT.require(Algorithm.HMAC256(SECRET_KEY)).build();
return verifier.verify(token);
}
// 提取用户名
public String extractUsername(String token) {
DecodedJWT decodedJWT = verifyToken(token);
return decodedJWT.getSubject();
}
// 提取角色信息
public String extractRole(String token) {
DecodedJWT decodedJWT = verifyToken(token);
return decodedJWT.getClaim("role").asString(); // 提取角色;
}
// 检查Token是否过期
public Boolean isTokenExpired(String token) {
return verifyToken(token).getExpiresAt().before(new Date());
}
}
SpringSecurity配置代码
package cn.ryanfan.virtulab_back.config;
import cn.ryanfan.virtulab_back.Filter.JwtAuthenticationFilter;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
// Spring Security 配置类
@EnableWebSecurity
@Configuration
public class SecurityConfig {
private final JwtAuthenticationFilter jwtAuthenticationFilter; // 使用构造函数注入 JWT 过滤器
@Autowired
public SecurityConfig(JwtAuthenticationFilter jwtAuthenticationFilter) {
this.jwtAuthenticationFilter = jwtAuthenticationFilter;
}
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.csrf(csrf -> csrf.disable()) // 禁用 CSRF
.authorizeHttpRequests(authorize -> authorize
.requestMatchers("/userLogin","/Test").permitAll() // 登录接口允许所有人访问
.anyRequest().authenticated() // 其他请求需要认证
)
.addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); // 添加 JWT 过滤器
return http.build();
}
}
关键的SpringSecurity过滤器代码,实现接口检测
package cn.ryanfan.virtulab_back.Filter;
import cn.ryanfan.virtulab_back.config.JwtUtil;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.auth0.jwt.interfaces.Claim;
import com.auth0.jwt.interfaces.DecodedJWT;
import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;
import java.io.IOException;
import java.util.Map;
import java.util.Date;
import java.util.concurrent.TimeUnit;
// JWT 过滤器类
@Component
@Slf4j
public class JwtAuthenticationFilter extends OncePerRequestFilter {
private final JwtUtil jwtUtil; // 使用构造函数注入
@Autowired
private StringRedisTemplate redisTemplate;
@Autowired
public JwtAuthenticationFilter(JwtUtil jwtUtil) {
this.jwtUtil = jwtUtil;
}
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
throws ServletException, IOException {
String path = request.getRequestURI();
if ("/VirtuLab_back/userLogin".equals(path)) {
chain.doFilter(request, response); // 直接放行
return;
}
// 执行 JWT 认证逻辑
// JWT token,在此处解析和验证
String authorizationHeader = request.getHeader("Authorization");
if (authorizationHeader != null && authorizationHeader.startsWith("Bearer ")) {
String token = authorizationHeader.substring(7);
log.info("token: " + token);
try {
DecodedJWT decodedJWT = jwtUtil.verifyToken(token);
String username = decodedJWT.getSubject();
// 检查 Token 是否过期
if (jwtUtil.isTokenExpired(token)) {
response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Token过期请重新登录");
log.error("Token过期请重新登录: " + "Token过期请重新登录");
return;
}
// 检查 Redis 中的用户状态
String userInfoKey = "user:loginInfo:" + username;
if (redisTemplate.opsForHash().get(userInfoKey, "token") != null) {
// 如果用户信息存在,重置过期时间为30分钟
redisTemplate.expire(userInfoKey, 30, TimeUnit.MINUTES);
log.info("如果用户信息存在: " + "重置过期时间为30分钟");
// 在这里可以设置 SecurityContext 或其他逻辑
}
else {
response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "请重新登录");
log.warn("请重新登录: " + "请重新登录");
return; // Redis 中用户状态无效
}
} catch (JWTVerificationException e) {
response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Unauthorized");
log.warn(".....: " + ".....");
return;
}
}
else if(authorizationHeader == null){
response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "请重新登录");
log.warn("前端传入的token为空: " + "请重新登录");
}
chain.doFilter(request, response);
}
}
Redis配置代码
package cn.ryanfan.virtulab_back.config;
import org.springframework.cache.annotation.EnableCaching; // 导入启用缓存的注解
import org.springframework.context.annotation.Bean; // 导入用于定义 Bean 的注解
import org.springframework.context.annotation.Configuration; // 导入配置类的注解
import org.springframework.data.redis.cache.RedisCacheConfiguration; // 导入 Redis 缓存配置类
import org.springframework.data.redis.cache.RedisCacheManager; // 导入 Redis 缓存管理器
import org.springframework.data.redis.cache.RedisCacheWriter; // 导入 Redis 缓存写入器
import org.springframework.data.redis.connection.RedisConnectionFactory; // 导入 Redis 连接工厂接口
import org.springframework.data.redis.core.RedisTemplate; // 导入 Redis 模板类
import org.springframework.data.redis.serializer.GenericJackson2JsonRedisSerializer; // 导入通用 JSON 序列化器
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer; // 导入 Jackson JSON 序列化器
import org.springframework.data.redis.serializer.RedisSerializationContext; // 导入 Redis 序列化上下文
import org.springframework.data.redis.serializer.StringRedisSerializer; // 导入字符串序列化器
@Configuration // 声明这是一个配置类
@EnableCaching // 启用 Spring 缓存管理功能
public class RedisConfig {
@Bean // 定义一个 Bean,将在 Spring 容器中创建 RedisTemplate
public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {
RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>(); // 创建 RedisTemplate 实例
redisTemplate.setConnectionFactory(factory); // 设置 Redis 连接工厂
redisTemplate.setKeySerializer(new StringRedisSerializer()); // 设置键的序列化方式为字符串
redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer()); // 设置值的序列化方式为 JSON
redisTemplate.setHashKeySerializer(new StringRedisSerializer()); // 设置哈希键的序列化方式为字符串
redisTemplate.setHashValueSerializer(new Jackson2JsonRedisSerializer<>(Object.class)); // 设置哈希值的序列化方式为 JSON
return redisTemplate; // 返回配置好的 RedisTemplate 实例
}
@Bean // 定义一个 Bean,将在 Spring 容器中创建 RedisCacheManager
public RedisCacheManager redisCacheManager(RedisTemplate<String, Object> redisTemplate) { // 明确指定参数化类型
// 检查 redisTemplate 或其连接工厂是否为 null
if (redisTemplate == null || redisTemplate.getConnectionFactory() == null) {
// 处理错误情况,例如抛出异常
throw new RuntimeException("RedisTemplate or its connection factory is null");
}
RedisCacheWriter redisCacheWriter = RedisCacheWriter.nonLockingRedisCacheWriter(redisTemplate.getConnectionFactory()); // 创建 RedisCacheWriter 实例
// 创建 RedisCacheConfiguration 实例,设置值的序列化方式
RedisCacheConfiguration redisCacheConfiguration = RedisCacheConfiguration.defaultCacheConfig()
.serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(redisTemplate.getValueSerializer()));
return new RedisCacheManager(redisCacheWriter, redisCacheConfiguration); // 返回配置好的 RedisCacheManager 实例
}
}
前端二次封装Axios代码,实现通过后端反馈状态码实现不同逻辑(具体的二次封装方法请看之前的文章)
import axios, { type AxiosInstance, type AxiosResponse } from "axios"
import config from '@/config';
import {ElNotification} from "element-plus";
import router from "@/router";
const http:AxiosInstance = axios.create({
baseURL: config.getBaseUrl(),
timeout: 10000, // 请求超时时间
headers: {'Content-Type': 'application/json'}
});
// 请求拦截器
http.interceptors.request.use(
(config) => {
const token = sessionStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
// 响应拦截器
http.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response?.status === 500) {
ElNotification({
title: '网络错误',
message: '请检查Redis与服务器是否都开启',
type: 'error',
});
// // 跳转到登录页面
router.replace('/')
} else if (error.code === 'ERR_NETWORK') {
ElNotification({
title: '接口提示',
message: '网络错误:服务器未开启或服务器崩溃',
type: 'error',
});
router.replace('/')
} else if (error.response?.status === 403) {
ElNotification({
title: '权限错误',
message: '您没有访问此资源的权限',
type: 'error',
});
}
return Promise.reject(error);
}
);
export default http;