前后端实现双Token无感刷新用户认证
前后端实现双Token无感刷新用户认证
本文记录了使用双Token机制实现用户认证的具体步骤，前端使用的Vue，后端使用SpringSecurity和JWT
双Token分别指的是AccessToken和RefreshToken
AccessToken：每次请求需要携带AccessToken访问后端数据，有效期短，减少AccessToken泄露带来的风险
RefreshToken：有效期长，只用于AccessToken过期时生成新的AccessToken
使用双Token机制的好处：
无感刷新：使用单个Token时，若Token过期，会强制用户重新登录，影响用户体验。双Token可以实现无感刷新，当AccessToken过期，应用会自动通过RefreshToken生成新的AccessToken，不会打断用户的操作。
提高安全性：若AccessToken有效期很长，当AccessToken被窃取后，攻击者可以长期使用这个Token，因此AccessToken的有效期不易过长。而RefreshToken只用于请求新的AccessToken和RefreshToken，它平时不会直接暴漏在网络中。
双Token认证的基本流程如下图：
1、用户登录后，服务器生成一个短期的访问令牌和一个长期的刷新令牌，并将它们发送给客户端。
2、客户端在每次请求受保护的资源时，携带访问令牌进行身份验证。
3、当访问令牌过期时，客户端使用刷新令牌向服务器请求新的访问令牌。
4、如果刷新令牌有效，服务器生成并返回新的访问令牌；否则，要求用户重新登录。
代码实现：
本文完整代码保存在Github仓库：https://github.com/Bombtsti/DoubleTokenDemo
忽略依赖导入和配置文件，直接从代码部分开始。
首先，编写一个SpringSecurity配置类（SecurityConfig.java）进行SpringSecurity的配置。
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
//自定义JWT拦截器
@Autowired
private JwtLoginFilter jwtLoginFilter;
@Autowired
private UserDetailService userDetailService;
//自定义认证方案
@Autowired
private TokenAuthenticationEntryPoint tokenAuthenticationEntryPoint;
@Bean
@Override
protected AuthenticationManager authenticationManager() throws Exception {
return super.authenticationManager();
}
@Override
protected void configure(HttpSecurity http) throws Exception {
// 关闭csrf和frameOptions，如果不关闭会影响前端请求接口（这里不展开细讲了，感兴趣的自行了解）
http.csrf().disable();
http.headers().frameOptions().disable();
http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
// 开启跨域以便前端调用接口
http.cors();
// 这是配置的关键，决定哪些接口开启防护，哪些接口绕过防护
http.authorizeRequests()
// 注意这里，是允许前端跨域联调的一个必要配置
.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
// 指定某些接口不需要通过验证即可访问。登陆、注册接口肯定是不需要认证的
.antMatchers("/api/login", "/login","/refreshToken").permitAll()
// 这里意思是其它所有接口需要认证才能访问
.anyRequest().authenticated();
//http.formLogin().loginPage("/login").defaultSuccessUrl("/").permitAll();
// http.exceptionHandling().authenticationEntryPoint(((httpServletRequest, httpServletResponse, e) -> {
// httpServletResponse.sendRedirect("/login");
// }));
http.exceptionHandling().authenticationEntryPoint(tokenAuthenticationEntryPoint);
http.addFilterBefore(jwtLoginFilter, UsernamePasswordAuthenticationFilter.class);
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
// 指定UserDetailService和加密器
auth.userDetailsService(userDetailService).passwordEncoder(passwordEncoder());
}
@Bean
public PasswordEncoder passwordEncoder(){
return new BCryptPasswordEncoder();
}
@Bean
CorsConfigurationSource corsConfigurationSource() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowCredentials(true);
configuration.setAllowedOrigins(Arrays.asList("*"));
configuration.setAllowedMethods(Arrays.asList("*"));
configuration.setAllowedHeaders(Arrays.asList("*"));
configuration.setMaxAge(Duration.ofHours(1));
source.registerCorsConfiguration("/**",configuration);
return source;
}
}
我们需要自定义一个JWT的拦截器（JwtLoginFilter.java）
@Component
public class JwtLoginFilter extends OncePerRequestFilter {
@Autowired
private UserDetailService userDetailService;
@Override
protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
String accessToken = httpServletRequest.getHeader("accessToken");
if(!StringUtils.hasText(accessToken)){
filterChain.doFilter(httpServletRequest,httpServletResponse);
return;
}
boolean checkToken = JWTUtil.checkToken(accessToken);
if(!checkToken){
throw new RuntimeException("token无效");
}
String username = JWTUtil.getUsername(accessToken);
UserDetails userDetails = userDetailService.loadUserByUsername(username);
UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(userDetails,null,null);
SecurityContextHolder.getContext().setAuthentication(authenticationToken);
filterChain.doFilter(httpServletRequest,httpServletResponse);
}
}
为了封装JWT相关的操作，可以编写了一个工具类（JWTUtil.java）
public class JWTUtil {
//定义两个常量，1.设置过期时间 2.密钥（随机，由公司生成）
public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";
/**
* 生成token
*
* @param username
* @param expirationTime
* @return
*/
public static String getJwtToken(String username, long expirationTime) {
return Jwts.builder()
//设置token的头信息
.setHeaderParam("typ", "JWT")
.setHeaderParam("alg", "HS256")
//设置过期时间
.setSubject("user")
.setIssuedAt(new Date())
//设置刷新
.setExpiration(new Date(System.currentTimeMillis() + expirationTime))
//设置token的主题部分
.claim("username", username)
//签名哈希
.signWith(SignatureAlgorithm.HS256, APP_SECRET)
.compact();
}
/**
* 判断token是否存在与有效
*
* @param jwtToken
* @return
*/
public static boolean checkToken(String jwtToken) {
if (StringUtils.isEmpty(jwtToken)) {
return false;
}
try {
//验证是否有效的token
Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
} catch (Exception e) {
return false;
}
return true;
}
/**
* 根据token信息得到getUserId
*
* @param jwtToken
* @return
*/
public static String getUsername(String jwtToken) {
//验证是否有效的token
Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
//得到字符串的主题部分
Claims claims = claimsJws.getBody();
return (String) claims.get("username");
}
/**
* 判断token是否存在与有效
*
* @param request
* @return
*/
public static boolean checkToken(HttpServletRequest request) {
try {
String jwtToken = request.getHeader(TokenConstant.ACCESS_TOKEN);
if (StringUtils.isEmpty(jwtToken)) {
return false;
}
Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
} catch (Exception e) {
e.printStackTrace();
return false;
}
return true;
}
}
另外，在使用SpringSecurity时，我们需要编写一个UserDetail类和一个UserDetailService类分别实现UserDetails和UserDetailsService接口
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserDetail implements UserDetails {
@Autowired
private User user;
@Override
public Collection<? extends GrantedAuthority> getAuthorities() {
return null;
}
@Override
public String getPassword() {
return user.getPassword();
}
@Override
public String getUsername() {
return user.getUsername();
}
@Override
public boolean isAccountNonExpired() {
return true;
}
@Override
public boolean isAccountNonLocked() {
return true;
}
@Override
public boolean isCredentialsNonExpired() {
return true;
}
@Override
public boolean isEnabled() {
return true;
}
}
@Service
public class UserDetailService implements UserDetailsService {
@Autowired
private UserMapper userMapper;
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
// User user = userMapper.findByUsername(username);
User user = new User("zlw", "$2a$10$m/4kcUo2LylsP4PKmFEFz.AcnV8DLtL/7krYxU7JcmqSPimnexd56");
if(user==null){
throw new UsernameNotFoundException("用户不存在");
}else{
return new UserDetail(user);
}
}
}
到这里，SpringSecurity和JWT的基本的配置完成了，接下来实现登录接口
//UserService.java
public Result<?> login(User user) {
Authentication authenticationToken = new UsernamePasswordAuthenticationToken(user.getUsername(),user.getPassword(),null);
Authentication authenticate = authenticationManager.authenticate(authenticationToken);
if (Objects.isNull(authenticate)) {
throw new RuntimeException("登陆失败");
}
UserDetails userDetail = userDetailService.loadUserByUsername(user.getUsername());
//登陆并通过账号密码认证后，生成双Token返回前端
String accessToken = JWTUtil.getJwtToken(userDetail.getUsername(), TokenConstant.ACCESS_TOKEN_EXPIRATION_TIME);
String refreshToken = JWTUtil.getJwtToken(userDetail.getUsername(), TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME);
//把refreshToken的生成时间保存在Redis里，这是为了后面利用refreshToken生成accessToken时判断refreshToken有没有过期
redisTemplate.opsForValue().set(userDetail.getUsername()+TokenConstant.REFRESH_TOKEN_START_TIME, String.valueOf(System.currentTimeMillis()), TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME, TimeUnit.MILLISECONDS);
Map<String,Object> map = new HashMap<>();
map.put(TokenConstant.ACCESS_TOKEN, accessToken);
map.put(TokenConstant.REFRESH_TOKEN, refreshToken);
map.put("userInfo", userDetail);
return Result.ok(map);
}
接下来，看前端的实现，写一个登录表单，在登录成功后将双Token保存在storage中。
<!--login.vue>-->
<template xmlns="http://www.w3.org/1999/html">
<div class="loginForm">
<div class="username">
账号：<input placeholder="输入账号" type="text" v-model="userLogin.username" />
</div>
<div class="password">
密码：<input placeholder="输入密码" type="password" v-model="userLogin.password"/>
</div>
<div class="loginBtn">
<button @click="loginMethod">登录</button>
</div>
<div>
<span>测试账号：zlw</span>
</div>
<div>
<span>测试密码：123123</span>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {login} from "@/api/user.js";
import {storage} from "@/utils/storage.js";
import router from "@/router/index.js";
import {useUserStore} from "@/store/userStore.js";
const userStore = useUserStore();
const userLogin = ref({
username:"",
password:""
})
const loginMethod = ()=>{
console.log("denglu");
login(userLogin.value).then((res)=>{
console.log(res)
storage.set("accessToken",res.data.accessToken);
storage.set("refreshToken",res.data.refreshToken);
userStore.setUserInfo(res.data.userInfo);
console.log(res.data.accessToken);
router.push({path:"/"});
}).catch((error)=>{
console.log("error");
console.log(error);
});
}
</script>
其中login函数的请求方式可以单独封装到一个js文件中：
//user.js
export const login = (data)=>{
return request({
url:"/login",
method:"post",
data:data
});
};
登录成功后，其他的请求都需要携带accessToken才能正常访问服务器的数据，我们需要配置Axios的请求拦截器和响应拦截器
//request.js
import axios from "axios";
import {useUserStore} from "@/store/userStore.js";
import {storage} from "@/utils/storage.js";
const baseURL = "http://localhost:8080/";
let isRefreshing = false;
let requestsQueue = [];
const service = axios.create({
baseURL:baseURL,
timeout:50000,
headers:{"Content-Type":"application/json;charset=utf-8"}
});
//请求拦截器
service.interceptors.request.use((config)=>{
const userStore = useUserStore();
if(userStore.getToken){
//请求头中加入accessToken
config.headers.accessToken = userStore.getToken();
}
return config;
},(error)=>{
return Promise.reject(error);
});
//响应拦截器
service.interceptors.response.use((res)=> {
console.log(res);
if (res.data.code === 200) {
return res.data;
}
const config = res.config;
//如果返回401，说明accessToken失效
if(res.data.code===401){
const userStore = useUserStore();
if(!isRefreshing){
isRefreshing = true;
storage.set("accessToken","");
const refreshToken = storage.get("refreshToken");
//通过refreshToken重新请求accessToken
return userStore.getNewToken(refreshToken).then(async (rftRes)=>{
console.log(rftRes);
//如果refreshToken也失效了，就重新登录
if(rftRes.data.code===501){
window.location.href = "/login";
}
const accessToken = rftRes.data.accessToken;
//保存新的双Token
storage.set("accessToken",rftRes.data.accessToken);
storage.set("refreshToken",rftRes.data.refreshToken);
//重新发送请求
const firstReqRes = await service.request(config);
//执行请求队列中的请求
requestsQueue.forEach((fuc)=>fuc(accessToken));
requestsQueue = [];
return firstReqRes;
}).finally(()=>{
isRefreshing = false;
});
}else{
//并发情况下如果正在请求新token，把请求先放到一个请求队列中
return new Promise((resolve)=>{
requestsQueue.push((token)=>{
config.headers.accessToken = token;
resolve(service.request(config));
});
});
}
}
return Promise.reject(res);
},(error)=>{
console.log("登陆失败");
window.localStorage.clear();
window.location.href = "/login";
});
export default service;
在响应拦截器中，当返回状态码401，说明accessToken已经过期了，这时需要从store中拿到refreshToken，并用refreshToken重新请求新的双Token，后端的实现接口如下：
//UserService.java
public Result<?> refreshToken(String refreshToken) {
Map<String,Object> map = new HashMap<>();
String username = JWTUtil.getUsername(refreshToken);
String accessToken = JWTUtil.getJwtToken(username,TokenConstant.ACCESS_TOKEN_EXPIRATION_TIME);
String refreshTokenStr = (String) redisTemplate.opsForValue().get(username+TokenConstant.REFRESH_TOKEN_START_TIME);
if(StringUtils.isBlank(refreshTokenStr)){
return Result.fail(map);
}
long refreshTokenStartTime = Long.parseLong(refreshTokenStr);
//如果refreshToken也过期了，就返回501错误码
if(refreshTokenStartTime+TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME < System.currentTimeMillis()){
return Result.forbidden(map);
} else if(refreshTokenStartTime+TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME-System.currentTimeMillis()<=TokenConstant.ACCESS_TOKEN_EXPIRATION_TIME){
//如果refreshToken快过期了，就生成一个新的refreshToken
refreshToken = JWTUtil.getJwtToken(username,TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME);
redisTemplate.opsForValue().set(username+TokenConstant.REFRESH_TOKEN_START_TIME , String.valueOf(System.currentTimeMillis()), TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME, TimeUnit.MILLISECONDS);
}
map.put(TokenConstant.ACCESS_TOKEN,accessToken);
map.put(TokenConstant.REFRESH_TOKEN,refreshToken);
return Result.ok(map);
}
更具体的代码保存在Github仓库中：https://github.com/Bombtsti/DoubleTokenDemo
