我要评论一、方案说明
1. 核心流程
- 用户登录
- 提交账号密码 → 服务端验证 → 返回access token（前端存储） + refresh token（httponly cookie）
- 业务请求
- 请求头携带access token → 服务端验证有效性 → 有效则返回数据
- token过期处理
- 若access token过期 → 前端拦截401错误 → 自动用refresh token请求新token → 刷新后重试原请求
- refresh token失效
- 清除登录态 → 跳转登录页
2. 安全设计
- access token
- 存储：前端内存（如vuex/redux）或
sessionstorage - 有效期：2小时
- 传输：
authorization: bearer <token>
- 存储：前端内存（如vuex/redux）或
- refresh token
- 存储：
httponly + secure + samesite=strictcookie - 有效期：7天
- 刷新机制：单次使用后更新，旧token立即失效
- 存储：
二、前端实现（react示例）
1. axios封装（src/utils/http.js）
import axios from 'axios';
const http = axios.create({
baseurl: process.env.react_app_api_url,
});
// 请求拦截器：注入access token
http.interceptors.request.use(config => {
const accesstoken = sessionstorage.getitem('access_token');
if (accesstoken) {
config.headers.authorization = `bearer ${accesstoken}`;
}
return config;
});
// 响应拦截器：处理token过期
http.interceptors.response.use(
response => response,
async error => {
const originalrequest = error.config;
// 检测401错误且未重试过
if (error.response?.status === 401 && !originalrequest._retry) {
originalrequest._retry = true;
try {
// 发起刷新token请求
const { accesstoken } = await refreshtoken();
// 存储新token
sessionstorage.setitem('access_token', accesstoken);
// 重试原请求
originalrequest.headers.authorization = `bearer ${accesstoken}`;
return http(originalrequest);
} catch (refresherror) {
// 刷新失败：清除token，跳转登录
sessionstorage.removeitem('access_token');
window.location.href = '/login';
return promise.reject(refresherror);
}
}
return promise.reject(error);
}
);
// 刷新token函数
async function refreshtoken() {
const res = await axios.post(
`${process.env.react_app_api_url}/auth/refresh`,
{},
{ withcredentials: true } // 自动携带cookie
);
return res.data;
}
export default http;2. 登录逻辑（src/pages/login.js）
const loginpage = () => {
const handlesubmit = async (e) => {
e.preventdefault();
try {
const res = await axios.post('/auth/login', {
username: 'user',
password: 'pass'
}, { withcredentials: true });
// 存储access token
sessionstorage.setitem('access_token', res.data.accesstoken);
// 跳转主页
window.location.href = '/';
} catch (err) {
alert('登录失败');
}
};
return (
<form onsubmit={handlesubmit}>
{/* 登录表单 */}
</form>
);
};三、后端实现（spring boot）
1. jwt工具类（jwtutil.java）
@component
public class jwtutil {
@value("${jwt.secret}")
private string secret;
@value("${jwt.access.expiration}")
private long accessexpiration;
@value("${jwt.refresh.expiration}")
private long refreshexpiration;
// 生成access token
public string generateaccesstoken(userdetails user) {
return buildtoken(user, accessexpiration);
}
// 生成refresh token
public string generaterefreshtoken(userdetails user) {
return buildtoken(user, refreshexpiration);
}
private string buildtoken(userdetails user, long expiration) {
return jwts.builder()
.setsubject(user.getusername())
.setissuedat(new date())
.setexpiration(new date(system.currenttimemillis() + expiration))
.signwith(signaturealgorithm.hs256, secret)
.compact();
}
// 验证token
public boolean validatetoken(string token) {
try {
jwts.parser().setsigningkey(secret).parseclaimsjws(token);
return true;
} catch (jwtexception | illegalargumentexception e) {
throw new jwtexception("token验证失败");
}
}
// 从token中提取用户名
public string getusernamefromtoken(string token) {
return jwts.parser()
.setsigningkey(secret)
.parseclaimsjws(token)
.getbody()
.getsubject();
}
}2. 认证接口（authcontroller.java）
@restcontroller
@requestmapping("/auth")
public class authcontroller {
@autowired
private jwtutil jwtutil;
@autowired
private userdetailsservice userdetailsservice;
@autowired
private refreshtokenservice refreshtokenservice;
// 登录接口
@postmapping("/login")
public responseentity<?> login(@requestbody loginrequest request) {
userdetails user = userdetailsservice.loaduserbyusername(request.getusername());
// 密码验证
if (!passwordencoder.matches(request.getpassword(), user.getpassword())) {
throw new badcredentialsexception("密码错误");
}
// 生成token
string accesstoken = jwtutil.generateaccesstoken(user);
string refreshtoken = jwtutil.generaterefreshtoken(user);
// 存储refresh token
refreshtokenservice.saverefreshtoken(user.getusername(), refreshtoken);
// 设置refresh token到cookie
responsecookie cookie = responsecookie.from("refreshtoken", refreshtoken)
.httponly(true)
.secure(true)
.samesite("strict")
.maxage(jwtutil.getrefreshexpiration() / 1000)
.path("/auth/refresh")
.build();
return responseentity.ok()
.header(httpheaders.set_cookie, cookie.tostring())
.body(new authresponse(accesstoken));
}
// 刷新token接口
@postmapping("/refresh")
public responseentity<?> refreshtoken(@cookievalue("refreshtoken") string refreshtoken) {
// 验证refresh token
if (!jwtutil.validatetoken(refreshtoken)) {
throw new jwtexception("无效token");
}
string username = jwtutil.getusernamefromtoken(refreshtoken);
// 检查是否与存储的token一致
if (!refreshtokenservice.validaterefreshtoken(username, refreshtoken)) {
throw new jwtexception("token已失效");
}
// 生成新token
userdetails user = userdetailsservice.loaduserbyusername(username);
string newaccesstoken = jwtutil.generateaccesstoken(user);
string newrefreshtoken = jwtutil.generaterefreshtoken(user);
// 更新存储的refresh token
refreshtokenservice.updaterefreshtoken(username, newrefreshtoken);
// 返回新token
responsecookie cookie = responsecookie.from("refreshtoken", newrefreshtoken)
.httponly(true)
.secure(true)
.samesite("strict")
.maxage(jwtutil.getrefreshexpiration() / 1000)
.path("/auth/refresh")
.build();
return responseentity.ok()
.header(httpheaders.set_cookie, cookie.tostring())
.body(new authresponse(newaccesstoken));
}
}3. refresh token服务（refreshtokenservice.java）
@service
public class refreshtokenservice {
@autowired
private refreshtokenrepository repository;
public void saverefreshtoken(string username, string token) {
refreshtoken refreshtoken = new refreshtoken();
refreshtoken.setusername(username);
refreshtoken.settoken(token);
refreshtoken.setexpirydate(jwtutil.getexpirationdatefromtoken(token));
repository.save(refreshtoken);
}
public boolean validaterefreshtoken(string username, string token) {
return repository.findbyusernameandtoken(username, token)
.map(t -> t.getexpirydate().after(new date()))
.orelse(false);
}
public void updaterefreshtoken(string username, string newtoken) {
repository.deletebyusername(username);
saverefreshtoken(username, newtoken);
}
}四、安全配置（securityconfig.java）
@configuration
@enablewebsecurity
public class securityconfig extends websecurityconfigureradapter {
@autowired
private jwtauthenticationfilter jwtfilter;
@override
protected void configure(httpsecurity http) throws exception {
http
.csrf().disable()
.sessionmanagement().sessioncreationpolicy(sessioncreationpolicy.stateless)
.and()
.authorizerequests()
.antmatchers("/auth/**").permitall()
.anyrequest().authenticated()
.and()
.addfilterbefore(jwtfilter, usernamepasswordauthenticationfilter.class);
}
}
@component
public class jwtauthenticationfilter extends onceperrequestfilter {
@autowired
private jwtutil jwtutil;
@override
protected void dofilterinternal(httpservletrequest request,
httpservletresponse response,
filterchain chain) throws ioexception, servletexception {
string header = request.getheader("authorization");
if (header != null && header.startswith("bearer ")) {
string token = header.substring(7);
if (jwtutil.validatetoken(token)) {
string username = jwtutil.getusernamefromtoken(token);
usernamepasswordauthenticationtoken auth =
new usernamepasswordauthenticationtoken(username, null, new arraylist<>());
securitycontextholder.getcontext().setauthentication(auth);
}
}
chain.dofilter(request, response);
}
}五、配置参数（application.yml）
jwt:
secret: "your-256-bit-secret-key-here" # 通过环境变量注入
access:
expiration: 7200000 # 2小时（毫秒）
refresh:
expiration: 604800000 # 7天（毫秒）六、数据库表结构（mysql）
create table refresh_tokens ( id int auto_increment primary key, username varchar(255) not null, token varchar(512) not null, expiry_date datetime not null, unique key (username) );
此方案完整实现了双token无感刷新机制，具备以下特点：
- 完整的前后端代码示例，可直接集成到项目中
- 遵循安全最佳实践（httponly cookie、短期token）
- 支持并发请求处理和token主动吊销
- 清晰的模块划分，易于扩展维护
到此这篇关于springboot+react中双token实现无感刷新的文章就介绍到这了,更多相关双token无感刷新内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论