简述
由于基于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));
}