SpringBoot + Vue 集成 JWT 实现 Token 验证以及一种 Token 刷新策略的实现

前言

本文将介绍基于 SpringBoot 和 Vue 的前后端分离项目集成 JWT 的一种思路，此外还包括在包括记住密码功能情况下 Token 的刷新策略，本文假设你对以下知识有一定的了解，如果未接触过，建议先看一下推荐链接的内容：

JWT 的基本知识：JWT入门教程
跨域问题：解决前后端分离项目跨域问题
SpringBoot 集成 redis：通过源码了解redis的自动配置

下面这张图是本文实现 Token 验证以及刷新 Token 的基本思路，本文展示了实现最终效果的核心代码，完整代码（包括前端和后端代码）已同步到GitHub：

效果

下面是最终的效果展示，只展示了前端的界面部分：

实现

由于完整代码已上传到GitHub，本文将只展示了核心相关代码的实现思路，首先是后端部分：

后端实现

这里先简要介绍一下 Token 的刷新策略，为了实现在记住密码时 Token 失效时能得到刷新，这里将用户的最近一次登陆时间存储在 redis 中，当然也可以存在数据库中，如果满足刷新条件，更新 redis 中的最近一次登陆时间以及 Token 有限期限并刷新 Token。

下面再展示具体的配置，首先展示配置文件的设置:

spring:
  # 取消 banner 图标
  main:
    banner-mode: off

  # mysql 数据库连接设置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/blog?serverTimezone=GMT%2B8&charset=utf8mb4&useSSL=false
    username: root
    password: root

  # jpa 相关设置
  jpa:
    show-sql: true
    properties:
      hibernate:
      dialect: org.hibernate.dialect.MySQL5InnoDBDialect
    open-in-view: false

  # redis 相关配置
  redis:
    database: 0
    host: localhost
    port: 6379
    lettuce:
      pool:
        max-active: 8
        max-wait: -1
        max-idle: 10
        min-idle: 5
      shutdown-timeout: 100ms

# 设置端口
server:
  port: 8888

# 设置 jwt, 涉及时间单位均为秒
jwt:
  # 设置 Token 过期时间
  expiration: 10
  # 设置 JWT 的密钥
  secret: zjw1221
  # 设置记住密码的时间
  remember-time: 1296000
  # 设置小于某个时间, 自动更新 Token
  validate-time: 300

首先是 WebMvc 的配置：

@Configuration
public class WebConfig extends WebMvcConfigurationSupport {

	private final HttpInterceptor httpInterceptor;

	@Autowired
	public WebConfig(HttpInterceptor httpInterceptor) {
		this.httpInterceptor = httpInterceptor;
	}

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		// 跨域相关配置, 并让 authorization 可在响应头中出现
		registry.addMapping("/**")
				.allowedOrigins("*")
				.allowedMethods("POST", "GET", "PUT", "PATCH", "OPTIONS", "DELETE")
				.exposedHeaders("authorization")
				.allowedHeaders("*")
				.maxAge(3600);
	}

	@Override
	protected void addInterceptors(InterceptorRegistry registry) {
		// 设置自定义的拦截器, 拦截所有界面
		// 排除 /login 请求, 未防止 /login 失效, 将 /error 也加入
		registry.addInterceptor(httpInterceptor)
				.addPathPatterns("/**")
				.excludePathPatterns("/login", "/error");
		super.addInterceptors(registry);
	}

}

然后是拦截器的设置：

@Configuration
public class HttpInterceptor implements HandlerInterceptor {

    private final Gson gson;
    private final UserSecurityUtil userSecurityUtil;

    @Autowired
    public HttpInterceptor(Gson gson, UserSecurityUtil userSecurityUtil) {
        this.gson = gson;
        this.userSecurityUtil = userSecurityUtil;
    }

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 为了处理跨域请求, 如果发送的是 OPTIONS 直接正常返回
        if (HttpMethod.OPTIONS.matches(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return true;
        }

        // 设置请求头和响应头的编码格式
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=utf-8");

        // 调用校验方法, 校验请求头的 Token 是否合法
        boolean isOk = userSecurityUtil.verifyWebToken(request, response);

        // 如果不合法, 返回 false, 否则为 true
        if (!isOk) {
            ResultEntity<String> resultEntity = new ResultEntity<>();
            resultEntity.setErrMsg("请重新登录");
            resultEntity.setStatus(false);
            response.getWriter().write(gson.toJson(resultEntity));
            return false;
        }
        return true;
    }

}

之后是校验方法的设置：

@Component
public class UserSecurityUtil {

    private final RedisUtil redis;
    @Value("${jwt.validate-time}")
    private long validateTime;

    @Autowired
    public UserSecurityUtil(RedisUtil redis) {
        this.redis = redis;
    }

    public boolean verifyWebToken(HttpServletRequest req, HttpServletResponse resp) {
        // 获取请求头中的 authorization 信息
        String token = req.getHeader("authorization");
        // 如果为空直接返回 false
        if (token == null) {
            return false;
        }
        // 解码 Token 信息, 如果为空直接返回 false
        DecodedJWT jwtToken = JwtUtil.decode(token);
        if (jwtToken == null) {
            return false;
        }
        // 获取 Token 信息中的用户 id 信息
        // 到 redis 中判断, 如果不存在相关信息直接返回 false
        long uid = Long.parseLong(jwtToken.getSubject());
        if (redis.getExpire(uid) == -2) {
            return false;
        }
        // 根据 uid 到 redis 中获取 JwtEntity 实体信息
        JwtEntity jwtEntity = (JwtEntity) redis.get(uid);
        try {
            // 继续校验
            JwtUtil.verifyToken(token);
        } catch (SignatureVerificationException e) {
            // 出现签名校验异常直接返回 false
            return false;
        } catch (TokenExpiredException e) {
            // 如果过期, 判断是否符合获得刷新 Token 的条件
            // 如果返回为空, 说明 Token 过期, 删除 redis 中的信息, 并返回 false
            String newToken = JwtUtil.getRefreshToken(jwtToken, jwtEntity);
            if (newToken == null) {
                redis.del(uid);
                return false;
            }
            // 否则说明符合 token 刷新条件, 设置返回头部的 authorization, 并返回 true
            resp.setHeader("authorization", newToken);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        // 校验成功, 判断是否为不记住密码, 且 Token剩余有效时间小于某个特定值
        // 若小于某个特定时间, 则刷新 Token
        if (!jwtEntity.getIsRemember()) {
            Instant exp = jwtEntity.getLastLoginTime().atZone(ZoneId.systemDefault()).toInstant();
            Instant now = Instant.now();
            if (now.getEpochSecond() - exp.getEpochSecond() <= validateTime) {
                token = JwtUtil.getRefreshToken(jwtToken);
            }
        }
        // 设置返回头中的 token
        resp.setHeader("authorization", token);
        return true;
    }
}

然后是 JwtEntity 类设置：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class JwtEntity {

    private String token;
    // 防止 LocalDateTime 在序列化中出错
    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    private LocalDateTime lastLoginTime;
    private Boolean isRemember;

}

然后是 JwtUtil 的设置：

@Component
public class JwtUtil {

    private static String secret;
    private static long expiration;
    private static long rememberTime;
    private static RedisUtil redis;

    @Autowired
    public JwtUtil(RedisUtil redis) {
        JwtUtil.redis = redis;
    }

    @Value("${jwt.secret}")
    public void setSecret(String secret) {
        JwtUtil.secret = secret;
    }

    @Value("${jwt.expiration}")
    public void setExpiration(long expiration) {
        JwtUtil.expiration = expiration;
    }

    @Value("${jwt.remember-time}")
    public void setRememberTime(long rememberTime) {
        JwtUtil.rememberTime = rememberTime;
    }

    public static String createToken(Long uid, Instant issueAt) {
        // 生成 Token
        Instant exp = issueAt.plusSeconds(expiration);
        return createToken(uid.toString(), issueAt, exp);
    }

    public static DecodedJWT decode(String token){
        try {
            // 返回 Token 的解码信息
            return JWT.decode(token);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    public static void verifyToken(String token) {
        // 校验 Token
        JWTVerifier verifier = JWT.require(Algorithm.HMAC256(JwtUtil.secret)).build();
        verifier.verify(token);
    }

    public static String getRefreshToken(DecodedJWT jwtToken, JwtEntity jwtEntity) {
        // 这个刷新 Token 类用于处理 Token 失效的情况
        Instant exp = jwtEntity.getLastLoginTime().atZone(ZoneId.systemDefault()).toInstant();
        Instant now = Instant.now();
        // 如果超过记住密码的期限或者是设置未记住密码, 直接返回 null
        if (!jwtEntity.getIsRemember() || (now.getEpochSecond() - exp.getEpochSecond()) > rememberTime) {
            return null;
        }
        // 否则生成刷新的 Token, 并重新设置 redis 中存储的信息
        Instant newExp = exp.plusSeconds(expiration);
        String token = createToken(jwtToken.getSubject(), now, newExp);
        LocalDateTime lastLoginTime = getLastLoginTime(newExp);
        redis.set(jwtToken.getSubject(), new JwtEntity(token, lastLoginTime, true));
        return token;
    }

    public static String getRefreshToken(DecodedJWT jwtToken) {
        // 这个刷新 Token 类用于处理 Token 有效时间小于某个特定的值的情况
        // 生成刷新的 Token, 并重新设置 redis 中存储的信息
        Instant now = Instant.now();
        Instant newExp = now.plusSeconds(expiration);
        String token = createToken(jwtToken.getSubject(), now, newExp);
        redis.set(jwtToken.getSubject(), new JwtEntity(token, getLastLoginTime(now), false));
        return token;
    }

    private static String createToken(String sub, Instant iat, Instant exp) {
        // 生成 Token, 包括用户 uid, 生效和失效日期
        return JWT.create()
                .withClaim("sub", sub)
                .withClaim("iat", Date.from(iat))
                .withClaim("exp", Date.from(exp))
                .sign(Algorithm.HMAC256(JwtUtil.secret));
    }

    private static LocalDateTime getLastLoginTime(Instant newExp) {
        // 获取当前时间的 LocalDateTime 格式
        return LocalDateTime.ofInstant(newExp, ZoneId.systemDefault());
    }

}

然后就是登录控制器的设置：

@RestController
public class LoginInController {

    private final UserService userService;

    @Autowired
    public LoginInController(UserService userService) {
        this.userService = userService;
    }

    @PostMapping("/login")
    public ResultEntity<Long> login(@RequestBody LoginEntity loginEntity, HttpServletResponse response) {
        ResultEntity<Long> resultEntity = new ResultEntity<>();
        // 对登录信息中的用户名和密码进行校验
        User user = userService.findByUsername(loginEntity.getUsername());
        boolean isOk = user != null && user.getPassword().equals(loginEntity.getPassword());
        // 如果不满足, 直接返回
        if (!isOk) {
            resultEntity.setErrMsg("用户名或密码错误");
            resultEntity.setStatus(false);
            return resultEntity;
        }
        // 否则生成 Token, 并设置头部的 authorization 信息
        String token = userService.createWebToken(user.getId(), loginEntity.getIsRemember());
        response.setHeader("authorization", token);
        resultEntity.setData(user.getId());
        return resultEntity;
    }

}

登录实体类如下：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class LoginEntity {

    private String username;
    private String password;
    private Boolean isRemember;
}

UserService 内容如下：

@Service
public class UserService {

    private final UserDao dao;
    private final RedisUtil redis;

    @Autowired
    public UserService(UserDao dao, RedisUtil redis) {
        this.dao = dao;
        this.redis = redis;
    }

    public User findById(Long uid) {
        return dao.findById(uid).orElse(null);
    }

    public User findByUsername(String username) {
        return dao.findByUsername(username);
    }

    @Transactional
    public String createWebToken(Long uid, Boolean isRemember) {
        // 调用 JwtUtil 工具类的生成 Token 方法
        // 并在 redis 中存储对应用户的 token, 上次登录时间, 是否记住密码等时间
        Instant now = Instant.now();
        String token = JwtUtil.createToken(uid, now);
        LocalDateTime lastLoginTime = LocalDateTime.ofInstant(now, ZoneId.systemDefault());
        redis.set(uid, new JwtEntity(token, lastLoginTime, isRemember != null && isRemember));
        return token;
    }

    @Transactional
    public void deleteWebToken(Long uid) {
        // 从 redis 中删除对应用户的 Jwt 信息
        redis.del(uid);
    }

}

注销的控制器设置如下：

@RestController
public class LoginOutController {

    private final UserService userService;

    @Autowired
    public LoginOutController(UserService userService) {
        this.userService = userService;
    }

    @GetMapping("/exit")
    public String login(Long uid) {
        // 用户注销时, 根据用户 id 删除 redis 中存储的信息
        // 由于前台 uid 存在 localStorage, 因此这里存在一些安全问题
        // 不过本文属于 Jwt 的入门使用, 不做进一步处理
        userService.deleteWebToken(uid);
        return "注销成功";
    }

}

前端实现

首先是登录界面：

<template>
  <el-row type="flex" class="login">
    <el-col :span="6">
      <h1 class="title">JWT 测试</h1>
      <el-form :model="loginForm" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            autocomplete="off"
            placeholder="用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-form-item prop="isRemember">
          <el-checkbox v-model="loginForm.isRemember" class="remember">记住密码</el-checkbox>
          <el-button type="primary" @click="submitForm" class="login-btn">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>

import {
  Row,
  Col,
  Form,
  Input,
  Button,
  Message,
  Checkbox,
  FormItem,
  Loading
} from 'element-ui'
import {request} from '../network/request'

export default {
  name: 'Login',
  components: {
    'el-row': Row,
    'el-col': Col,
    'el-form': Form,
    'el-checkbox': Checkbox,
    'el-input': Input,
    'el-button': Button,
    'el-form-item': FormItem
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        isRemember: false
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    submitForm() {
      const loading = Loading.service({ fullscreen: true })
      request({
        method: 'post',
        url: '/login',
        data: {
          'username': this.loginForm.username,
          'password': this.loginForm.password,
          'isRemember': this.loginForm.isRemember
        }
      }).then(res => {
        loading.close()
        // 登录成功将用户 uid 存入 localStorage
        localStorage.setItem('uid', res.data)
        // 并跳转到 home 界面
        this.$router.push('/home')
        Message('登录成功')
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

然后是 Home 界面：

<template>
  <el-row type="flex" justify="center" align="middle" class="main">
    <el-col :span="12">
      <el-button @click="exit">注销</el-button>
      <el-button @click="test">测试</el-button>
    </el-col>
  </el-row>
</template>

<script>

import {
  Row,
  Col,
  Button,
  Message
} from 'element-ui'
import {request} from '../network/request'

export default {
  name: 'Home',
  components: {
    'el-row': Row,
    'el-col': Col,
    'el-button': Button
  },
  methods: {
    exit() {
      request({
        method: 'get',
        url: '/exit',
        params: {
          uid: localStorage.getItem('uid')
        }
      }).then(() => {
        // 用户注销后清除本地 Token
        localStorage.removeItem('authorization')
        // 并跳转到登录界面
        this.$router.push('/login')
        Message('注销成功')
      }).catch(err => {
        console.log(err)
      })
    },
    test() {
      request({
        method: 'get',
        url: '/hello',
      }).then(res => {
        if (res.data) {
          // Token 未过期则会正常返回 'Hello, world!' 信息
          Message(res.data)
        } else {
          // 否则提示用户登录
          Message('请重新登录')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

路由配置如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component() {
      return import('@/views/Home')
    }
  },
  {
    path: '/home',
    name: 'Home',
    component() {
      return import('@/views/Home')
    }
  },
  {
    path:'/login',
    name:'Login',
    component() {
      return import('@/views/Login')
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


// 设置全局的前置导航守卫
router.beforeEach((to, from, next) => {
  // 如果跳转的目的路径是 login 界面, 不做操作
  if (to.path === '/login') {
    next()
  } else {
    /**
     * 如果是其他界面, 判断本地是否存在 Token
     * 如果存在, 则正常跳转
     * 否则重定向到 login 界面
     */
    let token = localStorage.getItem('authorization')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

export default router

最后是网络请求相关的设置：

import axios from 'axios'
import router from '../router'

export function request(config) {

  const req = axios.create({
    baseURL: 'http://localhost:8888',
    timeout: 5000
  })

  // 将所有的网络请求头都带上本地存储的 Token
  req.interceptors.request.use(config => {
    const token = localStorage.getItem('authorization')
    token && (config.headers.authorization = token)
    return config
  })

  /**
   * 对所有请求得到的响应结果获取其中的 Token
   * 如果返回不为空, 则说明本地 Token 未失效, 重新设置本地 Token
   * 否则清除本地 Token, 并跳转到 login 界面
   */
  req.interceptors.response.use(response => {
    const token = response.headers.authorization
    if (token) {
      localStorage.setItem('authorization', token)
    } else {
      localStorage.removeItem('authorization')
      router.push('/login')
    }
    return response.data
  })

  return req(config)
}