登陆状态检测设计：Vue3+TypeScript+JWT+SpringSecurity+Redis+SpringBoot+Axios二次封装

置顶 I like Code?

已于 2024-10-09 14:05:19 修改

阅读量389

点赞数 2

文章标签： redis spring boot 数据库

于 2024-10-08 13:48:11 首次发布

本文链接：https://blog.csdn.net/qq_58055766/article/details/142755338

版权

大致思路如下：

用户进行登录==》后台检测是否存在该用户信息=》通过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;