Java JWT Token 后端过期判断与前端处理

后端实现

JWT Token 在后端一般是在接口拦截器或过滤器中进行判断有效期。以下示例代码展示了使用 Java Spring Boot 实现 JWT Token 过期判断：

@Component
public class JwtInterceptor implements HandlerInterceptor {

    @Autowired
    private JwtUtils jwtUtils;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 从请求头中获取token
        String token = request.getHeader('Authorization');
        if (StringUtils.isNotBlank(token)) {
            // 验证token是否有效
            boolean isValid = jwtUtils.verifyToken(token);
            if (isValid) {
                // 如果token有效，则将用户信息存入request中，方便后续操作
                Claims claims = jwtUtils.parseToken(token);
                request.setAttribute('currentUser', claims.getSubject());
                return true;
            }
        }
        // 如果token无效，则返回错误信息给前端
        response.setContentType('application/json;charset=UTF-8');
        response.getWriter().write(JSON.toJSONString(Result.fail('token已过期或无效')));
        return false;
    }
}

前端实现

在前端需要接收和处理换token的情况时，可以先定义一个拦截器，在请求返回时判断token是否过期，如果过期则重新获取新的token，并将新的token保存在本地缓存中，然后重新发起请求并带上新的token。以下示例代码展示了使用 Vue.js 实现 JWT Token 刷新机制：

import axios from 'axios'
import router from '@/router'
import { getToken, setToken } from '@/utils/auth'

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 添加请求拦截器
request.interceptors.request.use(
  config => {
    // 从本地缓存中获取token
    const token = getToken()
    // 如果token存在，则在请求头中添加Authorization字段，值为Bearer加上token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
request.interceptors.response.use(
  response => {
    const { data } = response
    // 如果token已过期或无效，则重新获取新的token
    if (data.code === 401) {
      const token = data.token
      if (token) {
        setToken(token)
        // 重新发起请求，并带上新的token
        return request(response.config)
      } else {
        router.push({ path: '/login' })
      }
    } else {
      return data
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default request

缓存操作

以上示例代码中，getToken和setToken是操作本地缓存的工具函数，以下示例代码展示了使用 localStorage 实现 token 缓存操作：

// 获取token
export function getToken() {
  return localStorage.getItem('token')
}

// 保存token
export function setToken(token) {
  return localStorage.setItem('token', token)
}

注意

确保你的 JWT 密钥在前后端一致，并妥善保管
前端重新获取 Token 后，需要重新发起请求，并带上新的 Token
如果需要更复杂的 Token 刷新机制，可以考虑使用 refresh token
建议使用 HTTPS 协议传输敏感信息

通过以上步骤，你就可以实现 JWT Token 的过期判断和前端自动刷新机制，确保用户在使用你的应用时能够持续保持登录状态。