前后端实现双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的设置。

1. @Configuration
2. @EnableWebSecurity
3. public class SecurityConfig extends WebSecurityConfigurerAdapter {
4.     //自定义JWT拦截器
5.     @Autowired
6.     private JwtLoginFilter jwtLoginFilter;
7.     @Autowired
8.     private UserDetailService userDetailService;
9.     //自定义认证方案
10.     @Autowired
11.     private TokenAuthenticationEntryPoint tokenAuthenticationEntryPoint;
12.     @Bean
13.     @Override
14.     protected AuthenticationManager authenticationManager() throws Exception {
15.         return super.authenticationManager();
16.     }
17.     @Override
18.     protected void configure(HttpSecurity http) throws Exception {
19.         // 关闭csrf和frameOptions，如果不关闭会影响前端请求接口（这里不展开细讲了，感兴趣的自行了解）
20.         http.csrf().disable();
21.         http.headers().frameOptions().disable();
22.         http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
23.         // 开启跨域以便前端调用接口
24.         http.cors();
26.         // 这是配置的关键，决定哪些接口开启防护，哪些接口绕过防护
27.         http.authorizeRequests()
28.                 // 注意这里，是允许前端跨域联调的一个必要配置
29.                 .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
30.                 // 指定某些接口不需要通过验证即可访问。登陆、注册接口肯定是不需要认证的
31.                 .antMatchers("/api/login", "/login","/refreshToken").permitAll()
32.                 // 这里意思是其它所有接口需要认证才能访问
33.                 .anyRequest().authenticated();
34.         //http.formLogin().loginPage("/login").defaultSuccessUrl("/").permitAll();
35. //        http.exceptionHandling().authenticationEntryPoint(((httpServletRequest, httpServletResponse, e) -> {
36. //            httpServletResponse.sendRedirect("/login");
37. //        }));
38.         http.exceptionHandling().authenticationEntryPoint(tokenAuthenticationEntryPoint);
39.         http.addFilterBefore(jwtLoginFilter, UsernamePasswordAuthenticationFilter.class);
40.     }
41.     @Override
42.     protected void configure(AuthenticationManagerBuilder auth) throws Exception {
43.         // 指定UserDetailService和加密器
44.         auth.userDetailsService(userDetailService).passwordEncoder(passwordEncoder());
45.     }
46.     @Bean
47.     public PasswordEncoder passwordEncoder(){
48.         return new BCryptPasswordEncoder();
49.     }
50.     @Bean
51.     CorsConfigurationSource corsConfigurationSource() {
52.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
53.         CorsConfiguration configuration = new CorsConfiguration();
54.         configuration.setAllowCredentials(true);
55.         configuration.setAllowedOrigins(Arrays.asList("*"));
56.         configuration.setAllowedMethods(Arrays.asList("*"));
57.         configuration.setAllowedHeaders(Arrays.asList("*"));
58.         configuration.setMaxAge(Duration.ofHours(1));
59.         source.registerCorsConfiguration("/**",configuration);
60.         return source;
61.     }
62. }

复制代码

我们需要自界说一个JWT的拦截器（JwtLoginFilter.java）

1. @Component
2. public class JwtLoginFilter extends OncePerRequestFilter {
4.     @Autowired
5.     private UserDetailService userDetailService;
7.     @Override
8.     protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
9.         String accessToken = httpServletRequest.getHeader("accessToken");
10.         if(!StringUtils.hasText(accessToken)){
11.             filterChain.doFilter(httpServletRequest,httpServletResponse);
12.             return;
13.         }
15.         boolean checkToken = JWTUtil.checkToken(accessToken);
16.         if(!checkToken){
17.             throw new RuntimeException("token无效");
18.         }
19.         String username = JWTUtil.getUsername(accessToken);
20.         UserDetails userDetails = userDetailService.loadUserByUsername(username);
21.         UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(userDetails,null,null);
22.         SecurityContextHolder.getContext().setAuthentication(authenticationToken);
23.         filterChain.doFilter(httpServletRequest,httpServletResponse);
24.     }
25. }

复制代码

为了封装JWT相关的操作，可以编写了一个工具类（JWTUtil.java）

1. public class JWTUtil {
2.     //定义两个常量，1.设置过期时间 2.密钥（随机，由公司生成）
3.     public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";
5.     /**
6.      * 生成token
7.      *
8.      * @param username
9.      * @param expirationTime
10.      * @return
11.      */
12.     public static String getJwtToken(String username, long expirationTime) {
13.         return Jwts.builder()
14.                 //设置token的头信息
15.                 .setHeaderParam("typ", "JWT")
16.                 .setHeaderParam("alg", "HS256")
17.                 //设置过期时间
18.                 .setSubject("user")
19.                 .setIssuedAt(new Date())
20.                 //设置刷新
21.                 .setExpiration(new Date(System.currentTimeMillis() + expirationTime))
22.                 //设置token的主题部分
23.                 .claim("username", username)
24.                 //签名哈希
25.                 .signWith(SignatureAlgorithm.HS256, APP_SECRET)
26.                 .compact();
27.     }
29.     /**
30.      * 判断token是否存在与有效
31.      *
32.      * @param jwtToken
33.      * @return
34.      */
35.     public static boolean checkToken(String jwtToken) {
36.         if (StringUtils.isEmpty(jwtToken)) {
37.             return false;
38.         }
39.         try {
40.             //验证是否有效的token
41.             Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
42.         } catch (Exception e) {
43.             return false;
44.         }
45.         return true;
46.     }
48.     /**
49.      * 根据token信息得到getUserId
50.      *
51.      * @param jwtToken
52.      * @return
53.      */
54.     public static String getUsername(String jwtToken) {
55.         //验证是否有效的token
56.         Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
57.         //得到字符串的主题部分
58.         Claims claims = claimsJws.getBody();
59.         return (String) claims.get("username");
60.     }
62.     /**
63.      * 判断token是否存在与有效
64.      *
65.      * @param request
66.      * @return
67.      */
68.     public static boolean checkToken(HttpServletRequest request) {
69.         try {
70.             String jwtToken = request.getHeader(TokenConstant.ACCESS_TOKEN);
71.             if (StringUtils.isEmpty(jwtToken)) {
72.                 return false;
73.             }
74.             Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
75.         } catch (Exception e) {
76.             e.printStackTrace();
77.             return false;
78.         }
79.         return true;
80.     }
81. }

复制代码

另外，在利用SpringSecurity时，我们需要编写一个UserDetail类和一个UserDetailService类分别实现UserDetails和UserDetailsService接口

1. @Data
2. @AllArgsConstructor
3. @NoArgsConstructor
4. public class UserDetail implements UserDetails {
6.     @Autowired
7.     private User user;
9.     @Override
10.     public Collection<? extends GrantedAuthority> getAuthorities() {
11.         return null;
12.     }
14.     @Override
15.     public String getPassword() {
16.         return user.getPassword();
17.     }
19.     @Override
20.     public String getUsername() {
21.         return user.getUsername();
22.     }
24.     @Override
25.     public boolean isAccountNonExpired() {
26.         return true;
27.     }
29.     @Override
30.     public boolean isAccountNonLocked() {
31.         return true;
32.     }
34.     @Override
35.     public boolean isCredentialsNonExpired() {
36.         return true;
37.     }
39.     @Override
40.     public boolean isEnabled() {
41.         return true;
42.     }
43. }

复制代码

接下来，看前端的实现，写一个登录表单，在登录成功后将双Token保存在storage中。

1. @Service
2. public class UserDetailService implements UserDetailsService {
3.     @Autowired
4.     private UserMapper userMapper;
6.     @Override
7.     public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
8. //        User user = userMapper.findByUsername(username);
9.         User user = new User("zlw", "$2a$10$m/4kcUo2LylsP4PKmFEFz.AcnV8DLtL/7krYxU7JcmqSPimnexd56");
10.         if(user==null){
11.             throw new UsernameNotFoundException("用户不存在");
12.         }else{
13.             return new UserDetail(user);
14.         }
15.     }
16. }

复制代码

其中login函数的请求方式可以单独封装到一个js文件中：

1. //UserService.java
2. public Result<?> login(User user) {
4.     Authentication authenticationToken = new UsernamePasswordAuthenticationToken(user.getUsername(),user.getPassword(),null);
5.     Authentication authenticate = authenticationManager.authenticate(authenticationToken);
6.     if (Objects.isNull(authenticate)) {
7.         throw new RuntimeException("登陆失败");
8.     }
10.     UserDetails userDetail = userDetailService.loadUserByUsername(user.getUsername());
11.     //登陆并通过账号密码认证后，生成双Token返回前端
12.     String accessToken = JWTUtil.getJwtToken(userDetail.getUsername(), TokenConstant.ACCESS_TOKEN_EXPIRATION_TIME);
13.     String refreshToken = JWTUtil.getJwtToken(userDetail.getUsername(), TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME);
15.     //把refreshToken的生成时间保存在Redis里，这是为了后面利用refreshToken生成accessToken时判断refreshToken有没有过期
16.     redisTemplate.opsForValue().set(userDetail.getUsername()+TokenConstant.REFRESH_TOKEN_START_TIME, String.valueOf(System.currentTimeMillis()), TokenConstant.REFRESH_TOKEN_EXPIRATION_TIME, TimeUnit.MILLISECONDS);
18.     Map<String,Object> map = new HashMap<>();
19.     map.put(TokenConstant.ACCESS_TOKEN, accessToken);
20.     map.put(TokenConstant.REFRESH_TOKEN, refreshToken);
21.     map.put("userInfo", userDetail);
22.     return Result.ok(map);
23. }

复制代码

登录成功后，其他的请求都需要携带accessToken才气正常访问服务器的数据，我们需要设置Axios的请求拦截器和相应拦截器

1. <template xmlns="http://www.w3.org/1999/html">
2.   
3.    
4.       账号：<input placeholder="输入账号" type="text"  v-model="userLogin.username" />
5.    
6.    
7.       密码：<input placeholder="输入密码" type="password"  v-model="userLogin.password"/>
8.    
9.    
10.       <button @click="loginMethod">登录</button>
11.    
13.    
14.       测试账号：zlw
15.    
16.    
17.       测试密码：123123
18.    
19.   
20. </template>

复制代码

在相应拦截器中，当返回状态码401，阐明accessToken已颠末期了，这时需要从store中拿到refreshToken，并用refreshToken重新请求新的双Token，后端的实现接口如下：
[code]//UserService.javapublic Result refreshToken(String refreshToken) {    Map 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()