登录相关功能的优化
- 登录后显示当前登录用户
- 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);
@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);
}
}
