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

登录相关功能的优化

登录后显示当前登录用户
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>

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

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

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

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

退出登录后，清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），才可以访问接口，如果没有凭证或者凭证跟后台创建的不一致，则说明该用户不合法。

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>

给后台接口加上统一的前缀/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 前缀

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);@Resourceprivate AdminService adminService;@PostConstructpublic 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 {// 从请求中获取tokenHttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();token = request.getHeader("token");// 如果token为空，则尝试从请求参数中获取if (StrUtil.isBlank(token)) {token = request.getParameter("token");}// 如果token仍然为空，则记录错误日志并返回nullif (StrUtil.isBlank(token)) {log.error("获取当前登录的token失败， token: {}", token);return null;}// 解析token，获取用户的idString adminId = JWT.decode(token).getAudience().get(0);// 根据用户id查找并返回管理员信息return staticAdminService.findByById(Integer.valueOf(adminId));} catch (Exception e) {// 如果出现异常，则记录错误日志并返回nulllog.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);// 注入的管理员服务，用于查询管理员信息@Resourceprivate AdminService adminService;/*** 在处理请求之前执行拦截操作* * @param request  当前的HTTP请求对象* @param response 当前的HTTP响应对象* @param handler  当前处理请求的处理器* @return 如果返回false，请求将不会继续；如果返回true，请求将继续* @throws Exception 如果在预处理过程中发生异常*/@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {// 从HTTP请求的header中获取tokenString token = request.getHeader("token");if (StrUtil.isBlank(token)) {// 如果header中没有token，尝试从请求参数中获取token = request.getParameter("token");}// 开始执行认证if (StrUtil.isBlank(token)) {throw new CustomException("无token，请重新登录");}// 获取token中的userIdString 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 {// 使用用户密码加签验证tokenJWTVerifier 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 {@Resourceprivate 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注册自定义拦截器*/@Overridepublic 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*/@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 允许所有来源的跨域请求corsConfiguration.addAllowedHeader("*"); // 允许所有请求头corsConfiguration.addAllowedMethod("*"); // 允许所有请求方法source.registerCorsConfiguration("/**", corsConfiguration); // 对所有路径下的请求应用跨域配置return new CorsFilter(source);}
}