springboot+vue3无感知刷新token实战

一、java后端

1、token构造实现类

①验证码方式实现类

②刷新token方式实现类

2、token相关操作：setCookie

①createToken

②refreshToken

二、前端（vue3+axios）

web网站中，前后端交互时，通常使用token机制来做认证，token一般会设置有效期，当token过了有效期后，用户需要重新登录授权获取新的token，但是某些业务场景下，用户不希望频繁的进行登录授权，但是安全考虑，token的有效期不能设置太长时间，所以有了刷新token的设计，无感知刷新token的机制更进一步优化了用户体验，本文是博主实际业务项目中基于springboot和vue3无感知刷新token的代码实战。

首先介绍无感知刷新token的实现思路：

①首次授权颁发token时，我们通过后端给前端请求response中写入两种cookie

- access_token

- refresh_token（超时时间比access_token长一些）

需要注意：

-后端setCookie时httpOnly=true（限制cookie只能被http请求携带使用，不能被js操作）

-前端axios请求参数withCredentials=true（http请求时，自动携带token）

②access_token失效时，抛出特殊异常，前后端约定http响应码（401），此时触发刷新token逻辑

③前段http请求钩子中，如果出现http响应码为401时，立即触发刷新token逻辑，同时缓存后续请求，刷新token结束后，依次续发缓存中的请求

一、java后端

后端java框架使用springboot，spring-security

登录接口：

/**
 * @author lichenhao
 * @date 2023/2/8 17:41
 */
@RestController
public class AuthController {

    /**
     * 登录方法
     *
     * @param loginBody 登录信息
     * @return 结果
     */
    @PostMapping("/oauth")
    public AjaxResult login(@RequestBody LoginBody loginBody) {
        ITokenGranter granter = TokenGranterBuilder.getGranter(loginBody.getGrantType());
        return granter.grant(loginBody);
    }
}


import lombok.Data;

/**
 * 用户登录对象
 *
 * @author lichenhao
 */
@Data
public class LoginBody {

    /**
     * 用户名
     */
    private String username;

    /**
     * 用户密码
     */
    private String password;

    /**
     * 验证码
     */
    private String code;

    /**
     * 唯一标识
     */
    private String uuid;

    /*
     * grantType 授权类型
     * */
    private String grantType;

    /*
    * 是否直接强退该账号登陆的其他客户端
    * */
    private Boolean forceLogoutFlag;
}

token构造接口类和token实现类构造器如下：

/**
 * @author lichenhao
 * @date 2023/2/8 17:29
 * <p>
 * 获取token
 */
public interface ITokenGranter {

    AjaxResult grant(LoginBody loginBody);
}


/**
 * @author lichenhao
 * @date 2023/2/8 17:29
 */
@AllArgsConstructor
public class TokenGranterBuilder {

    /**
     * TokenGranter缓存池
     */
    private static final Map<String, ITokenGranter> GRANTER_POOL = new ConcurrentHashMap<>();

    static {
        GRANTER_POOL.put(CaptchaTokenGranter.GRANT_TYPE, SpringUtils.getBean(CaptchaTokenGranter.class));
        GRANTER_POOL.put(RefreshTokenGranter.GRANT_TYPE, SpringUtils.getBean(RefreshTokenGranter.class));
    }

    /**
     * 获取TokenGranter
     *
     * @param grantType 授权类型
     * @return ITokenGranter
     */
    public static ITokenGranter getGranter(String grantType) {
        ITokenGranter tokenGranter = GRANTER_POOL.get(StringUtils.toStr(grantType, PasswordTokenGranter.GRANT_TYPE));
        if (tokenGranter == null) {
            throw new ServiceException("no grantType was found");
        } else {
            return tokenGranter;
        }
    }

}

这里通过LoginBody的grantType属性，指定实际的token构造实现类；同时，需要有token

本文我们用到了验证码方式和刷新token方式，如下