Flyinsky's Codes
1448 字
7 分钟
SpringBoot集成JWT令牌验证

简述#

​ 由于基于Seesion记忆客户端登陆状态,数据全部存储在服务器一端,虽然也依赖于浏览器存储sessionId,但是对于服务器来说压力还是过大。基于JWT Token的验证方式可以实现无状态令牌验证身份。其原理为:将用户的id,用户名等信息实用通用的任意加密算法将其加密为密文字符串(下述token),在用户登陆接口下将token返回到客户端,前端将其存储至cookie。

验证过程#

​ 在首次登陆后,后端返回前端token并存入浏览器cookie,后续请求会在请求头出Header携带token

{
  "Authorization" : "token"
}

​ 在后端收到请求后,配置的过滤器会拦截请求,解析请求头中的Authorization中是否为合法的用户信息后,放行请求。由于同样能够正确获取到请求用户的信息,后续操作和Session一致。

优劣#

  • 无状态
  • 可被暴力破解,不应插入秘密数据
  • 一旦签发,不可销毁,只能等过期
  • 传输过程应使用Https协议非对称加密

后端#

​ 在编写之前,我们需要添加fastjson,log4sj,jwt等依赖,接着要封装一些工具类和过滤器,其中,过滤器的扫描需要在SpringBoot启动类中打上@ServletComponentScan注解,否则无效。

@SpringBootApplication
@ServletComponentScan
public class BackEndApplication {
    public static void main(String[] args) {
        System.setProperty("druid.mysql.usePingMethod","false");
        SpringApplication.run(BackEndApplication.class, args);
    }
}

​ 使用maven管理软件包,在pom.xml中的dependencies标签中添加以下坐标:

<dependency>
       <groupId>com.alibaba</groupId>
       <artifactId>fastjson</artifactId>
       <version>2.0.53</version>
</dependency>
<dependency>
      <groupId>com.auth0</groupId>
      <artifactId>java-jwt</artifactId>
      <version>3.8.2</version>
</dependency>

​ 接下来可以开始编写工具类了,用于加密和解密token。

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.Claim;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.wjy.backend.Entity.Pojo.User;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @author Flyinsky
 * @email w2084151024@gmail.com
 * @date 2024/9/24 14:08
 */
public class JWTUtil {
    private static final Logger logger = LoggerFactory.getLogger(JWTUtil.class);
    /**
     * 密钥
     */
    private static final String SECRET = "密钥";

    /**
     * 过期时间
     **/
    private static final long EXPIRATION = 86400;//单位为秒

    /**
     * 生成用户token,设置token超时时间
     */
    public static String createToken(User user) {
        //过期时间
        Date expireDate = new Date(System.currentTimeMillis() + EXPIRATION * 7);
        Map<String, Object> map = new HashMap<>();
        map.put("alg", "HS256");
        map.put("typ", "JWT");
        String token = JWT.create()
                .withHeader(map)// 添加头部
                //可以将基本信息放到claims中
                .withClaim("id", user.getId())//userId
                .withClaim("username", user.getUsername())//username
                .withClaim("password","secret")//password
                .withExpiresAt(expireDate) //超时设置,设置过期的日期
                .withIssuedAt(new Date()) //签发时间
                .sign(Algorithm.HMAC256(SECRET)); //SECRET加密
        return token;
    }

    /**
     * 校验token并解析token
     */
    public static Map<String, Claim> verifyToken(String token) {
        DecodedJWT jwt = null;
        try {
            JWTVerifier verifier = JWT.require(Algorithm.HMAC256(SECRET)).build();
            jwt = verifier.verify(token);

            //decodedJWT.getClaim("属性").asString()  获取负载中的属性值

        } catch (Exception e) {
            logger.error(e.getMessage());
            logger.error("token解码异常");
            //解码异常则抛出异常
            return null;
        }
        return jwt.getClaims();
    }
}

​ 然后,写一个过滤器,拦截请求,并使用上面的工具类封装的方法进行加密和解密请求中的token。其中一些参数可以按照自己的项目进行调整,例如拦截路径,我直接进行对/api/*也就是对api路径下所有接口进行拦截,然后在拦截的请求中获取完整路径,如果是/api/auth验证接口则直接放行,因为我们需要为用户登陆和注册,获取验证码划开一道口子。

package com.wjy.backend.Filter;

/**
 * @author Flyinsky
 * @email w2084151024@gmail.com
 * @date 2024/9/24 14:13
 */
import com.alibaba.fastjson.JSON;
import com.auth0.jwt.interfaces.Claim;
import com.wjy.backend.Entity.DTO.RestBean;
import com.wjy.backend.Utils.JWTUtil;
import jakarta.servlet.*;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;
import java.io.IOException;
import java.util.Map;

/**
 * JWT过滤器,拦截 /secure的请求
 */
@Slf4j
@WebFilter(filterName = "JWTFilter", urlPatterns = "/api/*")
public class JWTFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        final HttpServletRequest request = (HttpServletRequest) req;
        final HttpServletResponse response = (HttpServletResponse) res;
        String requestURI = request.getRequestURI();

        response.setCharacterEncoding("UTF-8");
        //获取 header里的token
        final String token = request.getHeader("authorization");
        if (requestURI.startsWith("/api/auth")) {
            chain.doFilter(request, response); // 放行
            return;
        }
        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            chain.doFilter(request, response);
        }
        // Except OPTIONS, other request should be checked by JWT
        else {

            if (token == null) {
                response.getWriter().write(JSON.toJSONString(RestBean.failure(401,"未提供token")));
                return;
            }
            System.out.println(token);
            Map<String, Claim> userData = JWTUtil.verifyToken(token);
            if (userData == null) {
                response.getWriter().write(JSON.toJSONString(RestBean.failure(401,"token不合法")));
                return;
            }
            Integer id = userData.get("id").asInt();
            String username = userData.get("username").asString();
            String password= userData.get("password").asString();
            //过滤器 拿到用户信息,放到request中
            request.setAttribute("id", id);
            request.setAttribute("username", username);
            request.setAttribute("password", password);
            chain.doFilter(req, res);
        }
    }

    @Override
    public void destroy() {
    }
}

​ 在登陆接口也要做出改变:我们不需要再对session有任何操作,在校验用户名和密码合法后创建对应用户的token后返回给前端存储即可。

@PostMapping("login")
    public RestBean<String> login(@RequestParam("username")String username,
                                  @RequestParam("password")String password){
        User user = userService.login(username,password);
        if(user.getId() == -1) return RestBean.failure(403,"账号或密码错误!");
        String token = JWTUtil.createToken(user);
        return RestBean.success(token);
    }

​ 至此,后端接口就完成了,接下来就是前端来配合它了。

前端#

​ 首先,为了避免CRSF攻击,我们需要将token存储在localStorage中而不是Cookie。

​ 我们使用的HTTP请求框架是axios,并且封装了两个方法,其实都大差不差,只需要做一点点小小的更新即可。

​ 首先我们要在封装的js中写一个获取localStorage中token的函数,我这里在localStorage中的变量名为authToken。

function getAuthToken() {
    return localStorage.getItem('authToken') || '';
}

​ 接着在请求头处添加”Authorization”以及token值,这里以post函数为例:

添加的部分:

headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    "Authorization": getAuthToken()
},

完整部分:

function post(url, data, success, failure = defaultFailure, error = defaultError) {
    axios.post(url, data, {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": getAuthToken()
        },
        withCredentials: true
    }).then(({data}) => {
        if (data.success)
            success(data.message, data.status)
        else
            failure(data.message, data.status)
    }).catch(error)
}

​ 至此,每次请求便会在请求头携带验证令牌了,那么接下来,还需要处理登陆接口,首次登陆将后端返回的token存储到localStorage。

post('/api/auth/login',{
      username: loginForm.username,
      password: loginForm.password
    },(message) =>{
      messageApi.success("登陆成功,欢迎回来~");
      setTimeout(() => {
        localStorage.setItem("authToken",message);
        router.push('/platform');
      },1000)
    },(message) =>{
      messageApi.warning(message);
    })

后端后续接口获取用户信息#

​ 在前面的过滤器中不难看出我们在HttpServletRequest中添加了用户名,ID两个属性,这就是给后续的接口辨别身份使用的。

@GetMapping("me")
    public RestBean<User> getMe(HttpServletRequest request) {
        Integer uid = (Integer) request.getAttribute("id");
        return RestBean.success(userService.getUserById(uid));
    }