登录相关功能的优化【JWT令牌+拦截器+跨域】

登录相关功能的优化

1. 登录后显示当前登录用户
2. el-dropdown: Element - The world's most popular Vue UI framework

<el-dropdown style="float: right; height: 60px; line-height: 60px">
  <span class="el-dropdown-link" style="color: white; font-size: 16px">{{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>
      <div @click="logout">退出登录</div>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

1. 登录成功后，将登录的用户信息存储到前端的localStorage里

localStorage.setItem("user", JSON.stringify(res.data));

1. 登录成功后，从localStorage里获取当前的登录用户

data () {
  return {
    user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
  }
},

1. 退出登录后，清localStorage，跳到登录页

methods: {
  logout() {
    localStorage.removeItem("user");
    this.$router.push("/login");
  }
}

这样安全吗？？
肯定不安全，用户可以跳过登录，直接在浏览器上输入后台的路由地址，即可直接进入系统，访问敏感数据。

前端路由守卫

在路由配置文件index.js里，配上路由守卫

// 路由守卫
router.beforeEach((to ,from, next) => {
  if (to.path ==='/login') {
    next();
  }
  const user = localStorage.getItem("user");
  if (!user && to.path !== '/login') {
    return next("/login");
  }
  next();
})

这样就安全了吗？？
还是不安全，因为前端的数据是不安全的，是可以认为篡改的！就是说，鉴权放在前端，是不安全的。我们的登录鉴权肯定是要放在服务端来完成。

使用jwt在后端进行鉴权

在用户登录后，后台给前台发送一个凭证（token），前台请求的时候需要带上这个凭证（token），才可以访问接口，如果没有凭证或者凭证跟后台创建的不一致，则说明该用户不合法。

1. pom.xml

<dependency>
    <groupId>com.auth0</groupId>
    <artifactId>java-jwt</artifactId>
    <version>3.10.3</version>
</dependency>
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.3.7</version>
</dependency>

1. 给后台接口加上统一的前缀/api，然后我们统一拦截该前缀开头的接口，所以配置一个拦截器（这个可有可无，看自己意愿）

import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
// 使用@Configuration注解标记该类为配置类，用于替代xml配置文件
public class WebConfig implements  WebMvcConfigurer {
    @Override
    // 实现configurePathMatch方法，用于配置路径匹配策略
    public void configurePathMatch(PathMatchConfigurer configurer) {
        // 指定controller统一的接口前缀
        // 通过addPathPrefix方法为所有带有RestController注解的控制器添加"/api"前缀
        configurer.addPathPrefix("/api", clazz -> clazz.isAnnotationPresent(RestController.class));
    }
}

request封装里面，baseUrl也需要加个 /api 前缀

1. Jwt配置

JwtTokenUtils.java
jwt的规则

import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.StrUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import com.example.entity.Admin;
import com.example.service.AdminService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;

@Component
public class JwtTokenUtils {

    private static AdminService staticAdminService;
    private static final Logger log = LoggerFactory.getLogger(JwtTokenUtils.class);

    @Resource
    private AdminService adminService;

    @PostConstruct
    public void setUserService() {
        staticAdminService = adminService;
    }

    /**
     * 生成token
     */
    /**
     * 生成JWT令牌
     * 
     * @param adminId 管理员ID，将被保存到令牌的载荷中
     * @param sign 用于生成令牌的签名密钥
     * @return 生成的JWT令牌字符串
     * 
     * 此方法使用JWT库创建一个带有特定载荷和过期时间的令牌，并使用指定的签名密钥进行签名
     * 载荷中包含管理员ID，用于标识令牌的受众
     * 令牌将在创建后2小时过期，过期时间从当前时间开始计算
     * 签名使用HMAC256算法，以确保令牌的安全性
     */
    public static String genToken(String adminId, String sign) {
        return JWT.create().withAudience(adminId) // 将 user id 保存到 token 里面,作为载荷
                .withExpiresAt(DateUtil.offsetHour(new Date(), 2)) // 2小时后token过期
                .sign(Algorithm.HMAC256(sign)); // 以 password 作为 token 的密钥
    }

    /**
     * 获取当前登录的用户信息
     * 通过解析请求中的token，查找对应的管理员信息
     * 如果无法获取token或解析失败，则返回null
     * 
     * @return 当前登录的管理员对象，如果获取失败则返回null
     */
    public static Admin getCurrentUser() {
        // 初始化token变量
        String token = null;
        try {
            // 从请求中获取token
            HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
            token = request.getHeader("token");
            // 如果token为空，则尝试从请求参数中获取
            if (StrUtil.isBlank(token)) {
                token = request.getParameter("token");
            }
            // 如果token仍然为空，则记录错误日志并返回null
            if (StrUtil.isBlank(token)) {
                log.error("获取当前登录的token失败， token: {}", token);
                return null;
            }
            // 解析token，获取用户的id
            String adminId = JWT.decode(token).getAudience().get(0);
            // 根据用户id查找并返回管理员信息
            return staticAdminService.findByById(Integer.valueOf(adminId));
        } catch (Exception e) {
            // 如果出现异常，则记录错误日志并返回null
            log.error("获取当前登录的管理员信息失败, token={}", token,  e);
            return null;
        }
    }
}

用户在登录成功后，需要返回一个token给前台

// 生成jwt token给前端
String token = JwtTokenUtils.genToken(user.getId().toString(), user.getPassword());
user.setToken(token);

前台把token获取到，下次请求的时候，带到header里

const user = localStorage.getItem("user");
if (user) {
    config.headers['token'] = JSON.parse(user).token;
}

拦截器：JwtInterceptor.java

拦截器一般与jwt令牌联合使用

import cn.hutool.core.util.StrUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.example.entity.Admin;
import com.example.exception.CustomException;
import com.example.service.AdminService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * JWT拦截器，用于拦截请求并验证JWT令牌
 */
@Component
public class JwtInterceptor implements HandlerInterceptor {

    // 日志记录器
    private static final Logger log = LoggerFactory.getLogger(JwtInterceptor.class);

    // 注入的管理员服务，用于查询管理员信息
    @Resource
    private AdminService adminService;

    /**
     * 在处理请求之前执行拦截操作
     * 
     * @param request  当前的HTTP请求对象
     * @param response 当前的HTTP响应对象
     * @param handler  当前处理请求的处理器
     * @return 如果返回false，请求将不会继续；如果返回true，请求将继续
     * @throws Exception 如果在预处理过程中发生异常
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        // 从HTTP请求的header中获取token
        String token = request.getHeader("token");
        if (StrUtil.isBlank(token)) {
            // 如果header中没有token，尝试从请求参数中获取
            token = request.getParameter("token");
        }
        // 开始执行认证
        if (StrUtil.isBlank(token)) {
            throw new CustomException("无token，请重新登录");
        }
        // 获取token中的userId
        String userId;
        Admin admin;
        try {
            userId = JWT.decode(token).getAudience().get(0);
            // 根据token中的userid查询数据库
            admin = adminService.findById(Integer.parseInt(userId));
        } catch (Exception e) {
            String errMsg = "token验证失败，请重新登录";
            log.error(errMsg + ", token=" + token, e);
            throw new CustomException(errMsg);
        }
        if (admin == null) {
            throw new CustomException("用户不存在，请重新登录");
        }
        try {
            // 使用用户密码加签验证token
            JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(admin.getPassword())).build();
            jwtVerifier.verify(token); // 验证token
        } catch (JWTVerificationException e) {
            throw new CustomException("token验证失败，请重新登录");
        }
        // 验证通过，继续执行下一个拦截器或目标处理器
        return true;
    }
}

拦截器配置好了，但是如何生效？在webConfig里添加拦截器规则：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.annotation.Resource;

@Configuration
// 使用@Configuration注解标记该类为配置类，用于替代xml配置文件
public class WebConfig implements  WebMvcConfigurer {
    
    @Resource
    private JwtInterceptor jwtInterceptor;
    
    @Override
    // 实现configurePathMatch方法，用于配置路径匹配策略
    public void configurePathMatch(PathMatchConfigurer configurer) {
        // 指定controller统一的接口前缀
        // 通过addPathPrefix方法为所有带有RestController注解的控制器添加"/api"前缀
        configurer.addPathPrefix("/api", clazz -> clazz.isAnnotationPresent(RestController.class));
    }

    /**
     * 添加自定义拦截器JwtInterceptor
     * 设置拦截规则，用于对请求进行鉴权
     * 
     * @param registry 拦截器注册对象，用于向Spring MVC注册自定义拦截器
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 注册JwtInterceptor拦截器，并设置拦截路径为/api/**，即对所有/api下的请求进行拦截
        // 排除/api/admin/login和/api/admin/register路径，这些路径不需要鉴权即可访问
        registry.addInterceptor(jwtInterceptor).addPathPatterns("/api/**")
                .excludePathPatterns("/api/admin/login")
                .excludePathPatterns("/api/admin/register");
    }

}

跨越相关问题：

CorsConfig.java设置自定义头

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    /**
     * 创建并配置CorsFilter bean以支持跨域请求
     * 通过分析UrlBasedCorsConfigurationSource和CorsConfiguration的设置，
     * 可以允许所有来源的跨域请求，并对请求头和请求方法无限制
     *
     * @return 配置好的CorsFilter实例
     */
    /**
     * 该函数用于创建并配置一个CorsFilter Bean，以支持跨域请求。
     * 通过设置UrlBasedCorsConfigurationSource和CorsConfiguration，
     * 该函数允许所有来源的跨域请求，并且对请求头和请求方法没有限制。
     * 返回配置好的CorsFilter实例，将其注册到Spring上下文中，以便在处理请求时自动应用跨域配置。
     * @return
     */
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 允许所有来源的跨域请求
        corsConfiguration.addAllowedHeader("*"); // 允许所有请求头
        corsConfiguration.addAllowedMethod("*"); // 允许所有请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 对所有路径下的请求应用跨域配置
        return new CorsFilter(source);
    }
}