使用JWT双令牌机制进行接口请求鉴权

在前后端分离的开发过程中,前端发起请求,调用后端接口,后端在接收请求时,首先需要对收到的请求鉴权,在这种情况先我们可以采用JWT机制来鉴权。

JWT有两种机制,单令牌机制和双令牌机制。

单令牌机制服务端只生成一个 token,一般过期时间比较长,因此安全性稍差。

双令牌机制服务端生成两个token,一个access_token用来鉴权,过期时间一般较短(5分钟,15分钟等),另一个 refresh_token,只用来获取新的 access_token,过期时间较长(可设置为24小时或者更长)

单令牌机制一般步骤:

1.前端发起登录请求

2.服务端验证用户名密码,验证通过则下发token返回给前端。

3.前端收到返回的token进行保存。

4.前端后续请求头将携带 token 供服务端验证。

5.服务端收到请求首先验证 token,验证通过则正常提供服务,不通过则返回相应提示信息。

6.token 过期后重新登录。

双令牌机制与单令牌机制不同的是服务端生成两个token,一个access_token用来鉴权,一个 refresh_token 用来刷新 access_token

双令牌机制一般步骤:

1.前端发起登录请求

2.服务端验证用户名密码,验证通过则下发access_token和refresh_token 返回给前端。

3.前端收到返回的两个 token进行保存。

4.前端后续请求头将携带 access_token供服务端验证。

5.服务端收到请求首先验证 token,验证通过则正常提供服务,不通过则返回相应提示信息。

6.access_token过期后,前端请求头 将 access_token替换为  refresh_token,调用刷新 access_token的接口。获取到新的  access_token并保存,重新发起请求。

1.pom.xml添加 java-jwt

<dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.10.1</version>
</dependency>

2.编写JwtUtil.java

import java.util.Calendar;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
public class JwtUtil {private final static String SIGNATURE = "sdf46fsdf"; //密钥private final static String ACCESS_TYPE = "access";private final static String REFRESH_TYPE = "refresh";private final static String SCOPE = "cms";private static int accessExpire = 15*60; //15分钟private static int refreshExpire = 60*60*24; //24小时/*** 生成  访问 token* @return 返回token*/public static String getAccessToken( String identity){JWTCreator.Builder builder = JWT.create();builder.withClaim("type", ACCESS_TYPE);builder.withClaim("identity", identity);builder.withClaim("scope", SCOPE);Calendar instance = Calendar.getInstance();instance.add(Calendar.SECOND, accessExpire);builder.withExpiresAt(instance.getTime());return builder.sign(Algorithm.HMAC256(SIGNATURE)).toString();}/*** 生成 刷新 token* @return 返回token*/public static String getRefreshToken(String identity){JWTCreator.Builder builder = JWT.create();builder.withClaim("type", REFRESH_TYPE);builder.withClaim("identity", identity);builder.withClaim("scope", SCOPE);Calendar instance = Calendar.getInstance();instance.add(Calendar.SECOND, refreshExpire);builder.withExpiresAt(instance.getTime());return builder.sign(Algorithm.HMAC256(SIGNATURE)).toString();}/*** 验证token* @param token*/public static void verify(String token){JWT.require(Algorithm.HMAC256(SIGNATURE)).build().verify(token);}/*** 获取token中payload* @param token* @return*/public static DecodedJWT getToken(String token){return JWT.require(Algorithm.HMAC256(SIGNATURE)).build().verify(token);}
}

3.过滤器校验token

import org.hibernate.annotations.common.util.StringHelper;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import com.auth0.jwt.exceptions.AlgorithmMismatchException;
import com.auth0.jwt.exceptions.InvalidClaimException;
import com.auth0.jwt.exceptions.JWTDecodeException;
import com.auth0.jwt.exceptions.SignatureVerificationException;
import com.auth0.jwt.exceptions.TokenExpiredException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qyp.hpa.util.JwtUtil;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.*;
@Component
public class FilterConfig implements HandlerInterceptor{public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)throws Exception {}public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2)throws Exception {}public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token,Content-length,Content-Range,Keep-Alive,Accept-Ranges,Connection");//Origin, X-Requested-With, Content-Type, Accept,Access-TokenString requestURL = request.getRequestURL().toString();if(requestURL.indexOf("login")!=-1 || requestURL.indexOf("refresh")!=-1){return true;}Map<String,Object> map = new HashMap<>();//令牌建议是放在请求头中,获取请求头中令牌AuthorizationString token = request.getHeader("Authorization");try{if(StringHelper.isEmpty(token)){map.put("msg","token不能为空");return false;}JwtUtil.verify(token);//验证令牌return true;//放行请求} catch (SignatureVerificationException e) {e.printStackTrace();map.put("msg","无效签名");} catch (TokenExpiredException e) {e.printStackTrace();map.put("code","10051");map.put("msg","token过期");} catch (AlgorithmMismatchException | JWTDecodeException | InvalidClaimException e) {e.printStackTrace();map.put("code","10041");map.put("msg","token算法不一致");} catch (Exception e) {e.printStackTrace();map.put("msg","token失效");}map.put("state",false);//设置状态//将map转化成json,response使用的是JacksonString json = new ObjectMapper().writeValueAsString(map);response.setContentType("application/json;charset=UTF-8");response.getWriter().print(json);return true;}
}

4.登录接口、刷新令牌接口

服务端登录接口

@RequestMapping(value="sys/login", method = RequestMethod.POST)public Map<String,Object> logIn(@RequestBody Map<String,Object> param) {Map<String,Object> map = new HashMap<String,Object>();String username = param.get("username")==null?"":param.get("username").toString();String password = param.get("password")==null?"":param.get("password").toString();try{//为了方便演示,直接写了固定的用户名和密码if("admin".equals(username) && "123456".equals(password)){String userId = "sadfsdfsdfsdfs";//生成JWT令牌String token = JwtUtil.getAccessToken(userId);String refresh_token = JwtUtil.getRefreshToken(userId);map.put(NS.MSG, "登录成功");map.put("access_token", token);map.put("refresh_token", refresh_token);map.put(NS.SUCC, NS.OK);}else {map.put(NS.MSG, NS.NO_USER);map.put(NS.SUCC, NS.ERROR);}} catch(Exception e){map.put(NS.SUCC, NS.ERROR);e.printStackTrace();}return map;}

服务端刷新令牌接口 

/*** 刷新令牌*/@GetMapping("sys/refresh")public Map<String,Object> getRefreshToken(HttpServletRequest request) {Map<String,Object> map = new HashMap<String,Object>();String tokenStr = request.getHeader("Authorization");DecodedJWT token = JwtUtil.getToken(tokenStr);String id = token.getClaim("identity").asString();//生成JWT令牌String access_token = JwtUtil.getAccessToken(id);map.put("access_token", access_token);return map;}

5. Vue前端调用

前端这里使用的是 vue3,以下是调用服务端登录接口,登录成功保存  access_token和 refresh_token

import { saveTokens
} from '@/util/token'
import { login} from '@/util/user'const _login= async () =>{const param = {username: 'admin',password: '123456',}const res:any = await login(param);console.log('login res', res);if(res.succ == '1'){saveTokens(res.access_token,res.refresh_token)}}

axios.js 封装处理  access_token过期,无感刷新 token

axios.js 封装处理当前端调用刷新 token的接口时,将请求头 headers.Authorization 字段替换为 refresh_token

T

util / token.js 工具类 

/*** 存储tokens* @param {string} accessToken* @param {string} refreshToken*/
export function saveTokens(accessToken, refreshToken) {localStorage.setItem('access_token', accessToken)localStorage.setItem('refresh_token', refreshToken)
}
/*** 存储access_token* @param {string} accessToken*/
export function saveAccessToken(accessToken) {localStorage.setItem('access_token', accessToken)
}
/*** 获得某个token* @param {string} tokenKey*/
export function getToken(tokenKey) {return localStorage.getItem(tokenKey)
}
/*** 移除token*/
export function removeToken() {localStorage.removeItem('access_token')localStorage.removeItem('refresh_token')
}

util / user.js 配置请求服务端登录接口

import {post,get} from '@/util/axios'
export async function login(data) {return await post('sys/login', data)
}

axios.js 完整代码

/*** 封装 axios*/
import axios from 'axios'
import {Message} from 'view-ui-plus'
import { getToken, saveAccessToken } from '@/util/token'
const baseUrl = "http://localhost:8089/"
const ErrorCode = {777: '前端错误码未定义',999: '服务器未知错误',10000: '未携带令牌',10020: '资源不存在',10030: '参数错误',10041: 'assessToken损坏',10042: 'refreshToken损坏',10051: 'assessToken过期',10052: 'refreshToken过期',10060: '字段重复',10070: '不可操作',
}
const config = {baseURL: baseUrl || '',timeout: 5 * 1000, // 请求超时时间设置crossDomain: true,// withCredentials: true, // Check cross-site Access-Control// 定义可获得的http响应状态码// return true、设置为null或者undefined,promise将resolved,否则将rejectedvalidateStatus(status) {return status >= 200 && status < 510},
}
/*** 错误码是否是refresh相关* @param { number } code 错误码*/
function refreshTokenException(code) {const codes = [10000, 10042, 10050, 10052, 10012]return codes.includes(code)
}
// 创建请求实例
const _axios = axios.create(config)
_axios.interceptors.request.use(originConfig => {// 有 API 请求重新计时///autoJump(router)const reqConfig = { ...originConfig }// step1: 容错处理if (!reqConfig.url) {console.error('request need url')}reqConfig.method = reqConfig.method.toLowerCase() // 大小写容错// 参数容错if (reqConfig.method === 'get') {if (!reqConfig.params) {reqConfig.params = reqConfig.data || {}}} else if (reqConfig.method === 'post') {if (!reqConfig.data) {reqConfig.data = reqConfig.params || {}}// 检测是否包含文件类型, 若包含则进行 formData 封装let hasFile = falseObject.keys(reqConfig.data).forEach(key => {if (typeof reqConfig.data[key] === 'object') {const item = reqConfig.data[key]if (item instanceof FileList || item instanceof File || item instanceof Blob) {hasFile = true}}})// 检测到存在文件使用 FormData 提交数据if (hasFile) {const formData = new FormData()Object.keys(reqConfig.data).forEach(key => {formData.append(key, reqConfig.data[key])})reqConfig.data = formData}}// step2: permission 处理if (reqConfig.url === 'sys/refresh') {const refreshToken = getToken('refresh_token')if (refreshToken) {reqConfig.headers.Authorization = refreshToken}} else {const accessToken = getToken('access_token')if (accessToken) {reqConfig.headers.Authorization = accessToken}}return reqConfig},error => Promise.reject(error),
)
// Add a response interceptor
_axios.interceptors.response.use(async res => {if (res.status.toString().charAt(0) === '2') {return res.data}const { code, msg } = res.datareturn new Promise(async (resolve, reject) => {let tipMessage = ''const { url } = res.config// refresh_token 异常,直接登出if (refreshTokenException(code)) {/** setTimeout(() => {store.dispatch('loginOut')const { origin } = window.locationwindow.location.href = origin}, 1500)return resolve(null)*/}// assessToken相关,刷新令牌console.log('msg',msg,'code',code)if (code === "10041" || code === "10051") {console.log('--msg',msg,'code',code)const cache = {}if (cache.url !== url) {cache.url = urlconst refreshResult = await _axios('sys/refresh')saveAccessToken(refreshResult.access_token)// 将上次失败请求重发const result = await _axios(res.config)return resolve(result)}}// 弹出信息提示的第一种情况:直接提示后端返回的异常信息(框架默认为此配置);// 特殊情况:如果本次请求添加了 handleError: true,用户自行通过 try catch 处理,框架不做额外处理if (res.config.handleError) {return reject(res)}if (typeof msg === 'string') {tipMessage = msg}if (Object.prototype.toString.call(msg) === '[object Object]') {;[tipMessage] = Object.values(msg).flat()}if (Object.prototype.toString.call(msg) === '[object Array]') {;[tipMessage] = msg}//ElMessage.error(tipMessage)Message.error(tipMessage)reject(res)})},error => {if (!error.response) {//ElMessage.error('请检查 API 是否异常')console.log('error', error)}// 判断请求超时if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {//ElMessage.warning('请求超时')}return Promise.reject(error)},
)
// 导出常用函数
/*** @param {string} url* @param {object} data* @param {object} params*/
export function post(url, data = {}, params = {}) {return _axios({method: 'post',url,data,params,})
}
/*** @param {string} url* @param {object} params*/
export function get(url, params = {}) {return _axios({method: 'get',url,params,})
}
/*** @param {string} url* @param {object} data* @param {object} params*/
export function put(url, data = {}, params = {}) {return _axios({method: 'put',url,params,data,})
}
/*** @param {string} url* @param {object} params*/
export function _delete(url, params = {}) {return _axios({method: 'delete',url,params,})
}
export default _axios

6.效果展示

调用登录接口

请求

响应

调用 list 接口,请求时将 token 放在  headers的  Authorization字段即可

在 access_token过期而  refresh_token未过期时,调用任意接口会刷新  access_token 

由上图可以看到,第一次调用 list 接口时,报 token 已过期,此时会自动调用 刷新 access_token的 refresh接口,成功刷新 access_token后,再次自动调用 list  接口,成功返回,达到了无感刷新token的效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/48080.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工作记录7.19

xss应当用filter进行过滤&#xff0c; null值校验 版本升级的时候&#xff0c;往往会发生代码冲突&#xff0c;这时候找到错误点&#xff0c;注释掉再看。 springboot2.7.15与springfox的Swagger3.0产生路径冲突 Swagger3.0 与spring boot2.7x 整合避免swagger2.0与boot2.7冲突…

环信IM x 亚马逊云科技,助力出海企业实现可靠通讯服务

随着全球化进程的加速&#xff0c;越来越多的企业选择出海&#xff0c;拓展国际市场。然而&#xff0c;面对不同国家和地区的用户&#xff0c;企业在即时通讯方面遇到了诸多挑战。为了帮助企业克服这些困难&#xff0c;环信IM与亚马逊云科技强强联手&#xff0c;共同推出了一套…

LDR6020:重塑iPad一体式有线键盘体验的创新力量

在移动办公与娱乐日益融合的时代&#xff0c;iPad凭借其强大的性能和便携性&#xff0c;成为了众多用户不可或缺的生产力工具。然而&#xff0c;为了进一步提升iPad的使用体验&#xff0c;一款高效、便捷的键盘成为了不可或缺的配件。今天&#xff0c;我们要介绍的&#xff0c;…

关于黑马商城微服务拆分

1.拆分流程 大差不差分为 创建module-依赖-启动类-配置yml文件-抽取代码-数据库-配置启动项-测试 2.微服务的好处 在测试的时候明显感觉到微服务的好处 不用启动所有的项目 只是单纯一个模块比如支付就可以自己调试 非常便捷而且易开发 抽取的公共模块api也不用启动就能测试 …

机器学习-20-基于交互式web应用框架streamlit的基础使用教程

参考简洁而优雅地展示你的算法和数据——streamlit教程(一) 原理介绍与布局控制 参考Streamlit 讲解专栏(二):搭建第一个应用 Streamlit 讲解专栏(三):两种方案构建多页面 Streamlit 讲解专栏(五):探索强大而灵活的 st.write() 函数 1 streamlit 1.1 运行原理 im…

免费缺陷管理工具深度评测与使用心得

国内外主流的10款缺陷跟踪工具对比&#xff1a;PingCode、Worktile、滴答清单、CalendarTask、专注清单、Todo清单、Jira、Bugzilla、MantisBT、Redmine。 在寻找合适的缺陷管理工具时&#xff0c;很多团队面临一个共同的挑战&#xff1a;如何在有限的预算内找到既高效又易于使…

探索光影魔法:WebKit中的CSS文本阴影效果

探索光影魔法&#xff1a;WebKit中的CSS文本阴影效果 CSS文本阴影&#xff08;Text Shadow&#xff09;是Web设计中一种创造视觉深度和强调文本的流行技术。它通过在文本下方添加模糊的阴影&#xff0c;为网页元素增添立体感。WebKit作为许多现代浏览器的渲染引擎&#xff0c;…

深入浅出WebRTC—ALR

ALR&#xff08;Application Limited Region&#xff09;指的是网络传输过程中&#xff0c;由于应用层的限制&#xff08;而非网络拥塞&#xff09;导致带宽未被充分利用的情况。在这种情况下&#xff0c;应用层可能因为处理能力、手动配置或其他因素无法充分利用可用带宽&…

Spring Authorization Server 自定义 OAuth2 密码模式返回数据结构优化

前言 对接了自定义密码模式&#xff0c;但是返回的数据结构不符合要求 我们需要改成下面格式 开始 我假设你已经对接好了自定义密码功能&#xff0c;不会的话看下面文章 Spring Authorization Server 1.1 扩展实现 OAuth2 密码模式与 Spring Cloud 的整合实战&#xff08;上…

ChatGPT对话:Windows如何将Python训练模型转换为TensorFlow.js格式

【编者按】编者目前正在做手机上的人工智能软件&#xff0c;第一次做这种工作&#xff0c;从一些基本工作开始与ChatGPT交流。对初学者应该有帮助。 一天后修改文章补充内容&#xff1a; 解决TensorFlow 2.X与TensorFlow Decision Forests版本冲突问题&#xff1a; 在使用tens…

像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包

文章目录 简介一、安装工具包二、实现步骤1.按照MvvmLight 的结构创建对应文件夹和文件2.编辑 ViewModelLocator3.引用全局资源二、使用详情1.属性2.命令3. 消息通知4. 完整程序代码展示运行结果简介 CommunityToolkit.Mvvm 包(又名 MVVM 工具包,以前称为 Microsoft.Toolkit…

学习计算机

不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未来就…

Programming Studio COSC2803

You must divide the implementation so that each member of the group contributes to every level. iuww520iuww520iuww520iuww520iuww520iuww520iuww520iuww520 Specifically:  Each person must implement one LEVEL 1 (GREEN) sub-task.  Each person must …

[数据集][目标检测]拐杖检测数据集VOC+YOLO格式2778张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2778 标注数量(xml文件个数)&#xff1a;2778 标注数量(txt文件个数)&#xff1a;2778 标注…

【iOS】—— isMemberOfClass isKindOfClass以及源码

【iOS】—— isMemberOfClass & isKindOfClass以及源码 isa指针示例源码解析&#xff1a;isKindOfClass&#xff1a;源码解析&#xff08;实例方法和类方法&#xff09;isMemberOfClass&#xff1a;源码解析&#xff08;实例方法和类方法&#xff09;源码分析总结&#xff…

【中项】系统集成项目管理工程师-第2章 信息技术发展-2.2新一代信息技术及应用-2.2.3大数据与2.2.4区块链

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

@Configuration的proxyBeanMethods

作用&#xff1a;用于控制配置类的代理行为,确定配置类中的 Bean 方法是否被代理&#xff0c;从而影响 Bean 的创建和管理方式 比较 proxyBeanMethods true 默认行为: 当 proxyBeanMethods 设置为 true&#xff08;默认值&#xff09;时&#xff0c;Spring 会为配置类创建一…

HTML进阶:探索语义化标记与可访问性优化

随着Web技术的不断发展&#xff0c;HTML不再仅仅是用来定义网页内容的标记语言&#xff0c;它还被赋予了更多的责任&#xff0c;如提高网页的可读性、可维护性和可访问性。语义化标记&#xff08;Semantic Markup&#xff09;和可访问性优化&#xff08;Accessibility Optimiza…

航班管理系统【C语言版】单文件编写

开发环境 操作系统&#xff1a;Windows 11专业版开发工具&#xff1a;Visual Studio Code编程语言&#xff1a;C 项目考核验收表 1. 设计目标 本项目的目标是设计并实现一个简易的航班管理系统。该系统应具备以下功能&#xff1a; 添加航班信息查询航班信息显示所有航班信…

自动标签的艺术:sklearn中的聚类标签自动分配技术

自动标签的艺术&#xff1a;sklearn中的聚类标签自动分配技术 在机器学习领域&#xff0c;聚类是一种无监督学习方法&#xff0c;它将数据集中的样本分组&#xff0c;使得同一组内的样本相似度高&#xff0c;而不同组之间的样本相似度低。与有监督学习不同&#xff0c;聚类不依…