前后端--jwt令牌的配置

jwt令牌的传递过程

• 前端发请求给后端
• 后端校验信息后，如果信息正确会返回给前端一个token
• 前端每次发请求都会携带token
• 后端每次接受前端发来的请求，都会先进行token验证，验证正确，才会进行请求操作

后端配置

jwt配置类

public class JwtUtil {
    /**
     * 生成jwt
     * 使用Hs256算法, 私匙使用固定秘钥
     * @param secretKey jwt秘钥
     * @param ttlMillis jwt过期时间(毫秒)
     * @param claims    设置的信息
     * @return
     */
    public static String createJWT(String secretKey, long ttlMillis, Map<String, Object> claims) {
        // 指定签名的时候使用的签名算法，也就是header那部分
        SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;

        // 生成JWT的时间
        long expMillis = System.currentTimeMillis() + ttlMillis;
        Date exp = new Date(expMillis);

        // 设置jwt的body
        JwtBuilder builder = Jwts.builder()
                // 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
                .setClaims(claims)
                // 设置签名使用的签名算法和签名使用的秘钥
                .signWith(signatureAlgorithm, secretKey.getBytes(StandardCharsets.UTF_8))
                // 设置过期时间
                .setExpiration(exp);
        return builder.compact();
    }

    /**
     * Token解密
     *
     * @param secretKey jwt秘钥 此秘钥一定要保留好在服务端, 不能暴露出去, 否则sign就可以被伪造, 如果对接多个客户端建议改造成多个
     * @param token     加密后的token
     * @return
     */
    public static Claims parseJWT(String secretKey, String token) {
        // 得到DefaultJwtParser
        Claims claims = Jwts.parser()
                // 设置签名的秘钥
                .setSigningKey(secretKey.getBytes(StandardCharsets.UTF_8))
                // 设置需要解析的jwt
                .parseClaimsJws(token).getBody();
        return claims;
    }

}

生成jwt相关配置

@Component
@ConfigurationProperties(prefix = "gs.jwt")
@Data
public class JwtProperties {
    private String userSecretKey;
    private long userTtl;
    private String userTokenName;
}

xml中的配置，会自动设置到JwtProperties 中

gs:
  jwt:
    # 设置jwt签名加密时使用的秘钥
    user-secret-key: gusui
    # 设置jwt过期时间
    user-ttl: 7200000
    # 设置前端传递过来的令牌名称
    user-token-name: authorization

jwt检验拦截器
 

@RequiredArgsConstructor
@Slf4j
@Component
public class JwtTokenUserInterceptor implements HandlerInterceptor {

    private final JwtProperties jwtProperties;

    /**
     * 拦截请求进行jwt令牌认证
     * @param request
     * @param response
     * @param handler
     * @return
     * @throws Exception
     */
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //判断当前拦截到的是Controller的方法还是其他资源
        if (!(handler instanceof HandlerMethod)) {
            // 不是Controller的方法直接通过
            return true;
        }

        // 从请求头中获取token
        String token = request.getHeader(jwtProperties.getUserTokenName());

        // 校验token
        try {
            Claims claims = JwtUtil.parseJWT(jwtProperties.getUserSecretKey(),token);
            Long userId = Long.valueOf(claims.get(JwtClaimsConstant.USER_ID).toString());
            BaseContext.setCurrentId(userId);
            // 通过，放行
            return true;
        } catch (Exception e) {
            // 不通过，响应401状态码
            response.setStatus(401);
            return false;
        }

    }

}

前端配置

jwt配置类

用于token令牌的设置，删除，获取，并将token存储到本地

const myToken = 'gs-token'

// 设置token
export const setToken = (newToken) => {
  localStorage.setItem(myToken, JSON.stringify(newToken))
}

// 获取token
export const getToken = () => {
  return JSON.parse(localStorage.getItem(myToken))
}

// 删除token
export const remToken = () => {
  localStorage.removeItem(myToken)
}

请求拦截器

所有的请求都带上token
 

import { getToken } from '@/utils/token.js'
import axios from 'axios'

// 设置后端地址
const baseURL = 'http://localhost:8090'

/**
 * @description 创建axios实例
 */
const instance = axios.create({
  baseURL,
  timeout: 60000 // 设置响应时间：1min
})

/**
 * @description 请求拦截器
 */
instance.interceptors.request.use(
  (config) => {
    // 添加token到http请求头的Authorization
    if (getToken()) {
      config.headers.Authorization = getToken()
    }
    return config
  },
)

// 导出
export default instance
export { baseURL }