一:JWT是什么?
常用鉴权方式有很多种,今天主要介绍基于token的鉴权方式JWT(Json JSON Web Token)。因为这种方式实现起来方便快捷。整体实现逻辑如下
第一次登陆时,前端携带账号和密码请求登录接口。服务端在验证登录通过后,将用户信息加密为一个token字符串返给前端。前端将token存在localstorage中。
在一般的业务请求中,前端从localstorage中取出并携带token。服务端接收到token后解密验证其时效性及合法性,如果token通过则正常返回数据,不通过则返回异常。
二:前端注意点
按照惯例前端请求接口时,携带token发送。token建议放在header中,命名为Authorization。尽量避免将token与一般入参一块放在body中,这样更加规范。
var config = {
headers: {
'Authorization': Token // 将 Token 放入 Authorization Header 中
}
};
var PostData = Object.assign({}, Para['RequestData']);
axios.post(Para['Url'], PostData,config).then(function (response) {})
然后在封装的异步请求方法中,直接携带token。即可完成集中处理,一劳永逸
Vue.prototype.SQAjax = function (Para) {
var that = this;
let AjaxLoading = Loading.service({
background: 'rgba(0,0,0,0.5)',
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
fullscreen: true
});
var Token = localStorage.getItem('sqBlogToken') ? localStorage.getItem('sqBlogToken') : '';
if (!Token) {
AjaxLoading.close(); // 中断代码前,注意关闭loading
this.$router.push({ name: 'LoginPage' });
return false;
}
// 设置请求头
var config = {
headers: {
'Authorization': Token // 将 Token 放入 Authorization Header 中
}
};
var PostData = Object.assign({}, Para['RequestData']);
axios.post(Para['Url'], PostData,config).then(function (response) {
AjaxLoading.close();
if (response.data.statusCode == 200) {
Para['Success'](response.data.data);
} else if (response.data.status == '1') {
that.$message({
message: response.data.data.message,
type: 'success'
});
that.$router.push({
name: 'LoginPage',
});
} else { // 返参异常的场景处理
that.$message({
message: response.data.data.message,
type: 'error',
duration: 900
});
}
}).catch(function (error) { // 接口不通的场景处理
AjaxLoading.close();
that.$message({
message: "接口不通",
type: 'error',
duration: 900
});
});
}
三:服务端工作
1、处理token的公共类
Java中使用jjwt的原生方法,即可以轻松搞定加密解密。先注入依赖,然后创建一个JwtUtil.java,当作公共文件备用。
其中需要注意密钥的保存,如果代码开源可将密钥放在配置文件中,且保障该配置文件不开源。
// pom依赖注入
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
public class JwtUtil {
private static final String SECRET_KEY = "your_secret_key";
// 生成 Token
public static String generateToken(User user) {
return Jwts.builder()
.setSubject(user.getName())
.claim("id", user.getId())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + 3600000)) // 1 hour expiration
.signWith(SignatureAlgorithm.HS256, SECRET_KEY)
.compact();
}
// 验证 Token
public static Claims validateToken(String token) throws Exception {
try {
return Jwts.parser()
.setSigningKey(SECRET_KEY)
.parseClaimsJws(token)
.getBody();
} catch (ExpiredJwtException e) {
throw new Exception("Token 已过期", e);
} catch (UnsupportedJwtException e) {
throw new Exception("Token 格式不支持", e);
} catch (MalformedJwtException e) {
throw new Exception("Token 无效", e);
} catch (SignatureException e) {
throw new Exception("Token 签名无效", e);
} catch (IllegalArgumentException e) {
throw new Exception("Token 参数无效", e);
}
}
}
2、验证token
如果开发管理后台,除了登录/注册操作,其他接口基本都需要鉴权。此种场景每个controller都鉴权一次过于繁琐。可使用拦截器,做到统一处理。
如下为配置拦截器,可将登录注册等不需要token验证的接口加入白名单。
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Autowired
private JwtInterceptor jwtInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(jwtInterceptor)
.addPathPatterns("/**") // 拦截所有请求
.excludePathPatterns("/login", "/register"); // 排除登录和注册接口
}
}
如下为拦截器具体代码
@Component
public class JwtInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String token = request.getHeader("Authorization");
if (token == null || token.isEmpty()) {
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
response.getWriter().write("Token is missing");
return false;
}
try {
JwtUtil.validateToken(token);
} catch (Exception e) {
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
response.getWriter().write("Invalid token: " + e.getMessage());
return false;
}
return true;
}
}
3、生成token
关于需要生成token的接口,其实只有登录接口一个地方。其余接口都是验证token
可在校验登录成功后,将用户信息及token一并返回前端。
String token = jwtUtil.generateToken(userInfo);
UserAuthResponse userAuthResponse = new UserAuthResponse(token, userInfo);
return ApiResponse.success(userAuthResponse);