iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >无感知刷新Token是什么
  • 315
分享到

无感知刷新Token是什么

2023-07-05 21:07:04 315人浏览 独家记忆
摘要

这篇文章主要介绍了无感知刷新Token是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇无感知刷新Token是什么文章都会有所收获,下面我们一起来看看吧。Token认证的原理在WEB应用中,常见的Token认

这篇文章主要介绍了无感知刷新Token是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇无感知刷新Token是什么文章都会有所收获,下面我们一起来看看吧。

    Token认证的原理

    WEB应用中,常见的Token认证方式有基于Cookie和基于Token的认证。基于Cookie的认证方式是将认证信息保存在Cookie中,每次请求时将Cookie发送给服务器进行认证;而基于Token的认证方式是将认证信息保存在Token中,每次请求时将Token发送给服务器进行认证。

    在基于Token的认证方式中,客户端将认证信息保存在Token中,而不是保存在Cookie中。在认证成功后,服务器将生成一个Access Token和一个Refresh Token,并将它们返回给客户端。Access Token用于访问受保护的api,Refresh Token用于获取新的Access Token。

    什么是无感知刷新Token

    无感知刷新Token是指,在Token过期之前,系统自动使用Refresh Token获取新的Access Token,从而实现Token的无感知刷新,用户可以无缝继续使用应用。

    在实现无感知刷新Token的过程中,需要考虑以下几个方面:

    • 如何判断Token是否过期?

    • 如何在Token过期时自动使用Refresh Token获取新的Access Token?

    • 如何处理Refresh Token的安全问题?

    下面将介绍如何实现无感知刷新Token的具体步骤。

    实现步骤

    步骤一:获取Access Token和Refresh Token

    在认证成功后,需要将Access Token和Refresh Token发送给客户端。Access Token用于访问受保护的API,Refresh Token用于获取新的Access Token。可以使用JwtJSON Web Token)或OAuth3(开放授权)等方式实现认证。

    在JWT中,可以使用如下代码生成Access Token和Refresh Token:

    const accessToken = jwt.sign({userId: '123'}, 'ACCESS_TOKEN_SECRET', {expiresIn: '15m'});const refreshToken = jwt.sign({userId: '123'}, 'REFRESH_TOKEN_SECRET', {expiresIn: '7d'});

    步骤二:在请求中携带Access Token

    在每个需要认证的API请求中,需要在请求头中携带Access Token,如下所示:

    GET /api/user Http/1.1Host: example.comAuthorization: Bearer eyJhbGCiOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

    前端中,可以使用AxiOS等库设置请求头:

    axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

    步骤三:拦截401 Unauthorized响应

    在服务器返回401 Unauthorized响应时,说明Access Token已经过期,需要使用Refresh Token获取新的Access Token。可以使用Axios拦截器或Fetch API的中间件实现拦截。

    在Axios中,可以使用如下代码实现拦截器:

    axios.interceptors.response.use(response => {  return response;}, error => {  const originalRequest = error.config;  if (error.response.status === 401 && !originalRequest._retry) {    originalRequest._retry = true; //防止无限调用    return axios.post('/api/refresh_token', {refreshToken})      .then(response => {        const { access_token, refresh_token } = response.data;        localStorage.setItem('access_token', access_token);        localStorage.setItem('refresh_token', refresh_token);        axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;        originalRequest.headers.Authorization = `Bearer ${access_token}`;        return axios(originalRequest);      });  }  return Promise.reject(error);});

    在Fetch中,可以使用如下代码实现中间件:

    function authMiddleware(request) {  const access_token = localStorage.getItem('access_token');  if (access_token) {    request.headers.set('Authorization', `Bearer ${access_token}`);  }  return request;}function tokenRefreshMiddleware(response) {  if (response.status === 401) {    const refreshToken = localStorage.getItem('refresh_token');    return fetch('/api/refresh_token', {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify({ refreshToken })    }).then(response => {      if (response.ok) {        return response.json();      }      throw new Error('Refresh Token failed');    }).then(data => {      localStorage.setItem('access_token', data.access_token);      localStorage.setItem('refresh_token', data.refresh_token);      return Promise.resolve('refreshed');    }).catch(error => {      localStorage.removeItem('access_token');      localStorage.removeItem('refresh_token');      return Promise.reject(error);    });  }  return Promise.resolve('ok');}fetch('/api/user', {  method: 'GET',  headers: {    'Content-Type': 'application/json'  },  middleware: [authMiddleware, tokenRefreshMiddleware]}).then(response => {  console.log(response);}).catch(error => {  console.error(error);});

    在上述代码中,使用Axios或Fetch拦截器拦截401 Unauthorized响应,如果发现Access Token已经过期,则发送Refresh Token请求获取新的Access Token,并将新的Access Token设置到请求头中,重新发送请求。

    步骤四:服务器处理Refresh Token请求

    在服务器端,需要编写API处理Refresh Token请求,生成新的Access Token,并返回给客户端。

    在JWT中,可以使用如下代码生成新的Access Token:

    const accessToken = jwt.sign({userId: '123'}, 'ACCESS_TOKEN_SECRET', {expiresIn: '15m'});

    在刷新Token时,需要验证Refresh Token的合法性,可以使用如下代码验证Refresh Token:

    try {  const payload = jwt.verify(refreshToken, 'REFRESH_TOKEN_SECRET');  const accessToken = jwt.sign({userId: payload.userId}, 'ACCESS_TOKEN_SECRET', {expiresIn: '15m'});  const refreshToken = jwt.sign({userId: payload.userId}, 'REFRESH_TOKEN_SECRET', {expiresIn: '7d'});  res.json({access_token: accessToken, refresh_token: refreshToken});} catch (err) {  res.sendStatus(401);}

    在上述代码中,使用JWT的verify方法验证Refresh Token的合法性,如果验证成功,则生成新的Access Token和Refresh Token,并返回给客户端。

    步骤五:设置定时刷新Token

    为了避免Access Token过期时间太长,可以设置定时刷新Token的功能。可以使用定时器或Web Workers等方式实现定时刷新Token。在每次刷新Token时,需要重新获取新的Access Token和Refresh Token,并保存到客户端。

    function refreshToken() {  const refreshToken = localStorage.getItem('refresh_token');  axios.post('/api/refresh_token', {refreshToken})    .then(response => {      const { access_token, refresh_token } = response.data;      localStorage.setItem('access_token', access_token);      localStorage.setItem('refresh_token', refresh_token);      axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;    })    .catch(error => {      console.error(error);    });}setInterval(refreshToken, 14 * 60 * 1000); // 每14分钟刷新Token

    在上述代码中,使用定时器每14分钟刷新Token。在刷新Token成功后,将新的Access Token和Refresh Token保存到客户端,并将新的Access Token设置到请求头中。

    安全性考虑

    在实现无感知刷新Token的过程中,需要考虑到Refresh Token的安全性问题。因为Refresh Token具有长期的有效期限,一旦Refresh Token被泄露,攻击者就可以使用Refresh Token获取新的Access Token,从而绕过认证机制,访问受保护的API。

    为了增加Refresh Token的安全性,可以考虑以下几种措施:

    • 将Refresh Token保存在HttpOnly Cookie中,可以避免在客户端被javascript获取;

    • 对Refresh Token进行加密或签名,可以增加其安全性。

    • 将Refresh Token保存在后端,前端通过接口和后端交互,实现刷新Access Token。

    关于“无感知刷新Token是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“无感知刷新Token是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

    --结束END--

    本文标题: 无感知刷新Token是什么

    本文链接: https://www.lsjlt.com/news/355354.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    本篇文章演示代码以及资料文档资料下载

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档
    猜你喜欢
    • 无感知刷新Token是什么
      这篇文章主要介绍了无感知刷新Token是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇无感知刷新Token是什么文章都会有所收获,下面我们一起来看看吧。Token认证的原理在Web应用中,常见的Token认...
      99+
      2023-07-05
    • 无感知刷新Token示例简析
      目录引言Token认证的原理什么是无感知刷新Token实现步骤步骤一:获取Access Token和Refresh Token步骤二:在请求中携带Access Token步骤三:拦截...
      99+
      2023-05-14
      无感知刷新Token Token 刷新
    • 如何实现无感刷新token
      目录1、需求方法一方法二方法三2、实现3、问题解决问题一:如何防止多次刷新token问题二:同时发起两个或者两个以上的请求时,其他接口怎么解决前言: 最近在做需求的时候,涉及到登录t...
      99+
      2024-04-02
    • Vue3+Vite使用双token实现无感刷新
      目录前言一、token 登录鉴权二、何为双 token双 token 验证流程注意事项三、服务端代码1. 搭建koa2服务器2. 双token3. 路由4. 应用中间件四、前端代码1...
      99+
      2023-05-17
      Vue3 无感刷新 Vue3 双token无感刷新
    • 详细聊聊前端如何实现token无感刷新(refresh_token)
      目录关于无感刷新的理解: 下面是关于使用vuex来实现的写法axios工具函数(请求拦截器与响应拦截器)总结关于无感刷新的理解:  实现token无感刷新对于前端...
      99+
      2022-11-13
      前端无感知刷新token 前端自动刷新token 前端怎么刷新token
    • js无痛刷新Token的实现
      这个需求场景很常见,几乎很多项目都会用上,之前项目也实现过,最近刚好有个项目要实现,重新梳理一番。 需求 对于需要前端实现无痛刷新Token,无非就两种: 请求前判断Token是否过...
      99+
      2024-04-02
    • 详解uniapp无痛刷新token方法
      前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token 大概流程如下: 1.用户登录之后,后端会返回两个 token ,分别...
      99+
      2024-04-02
    • uniapp无痛刷新token的方法介绍
      本篇文章和大家了解一下uniapp无痛刷新token的方法介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token...
      99+
      2023-06-15
    • jwt怎么解决刷新token
      JWT(JSON Web Token)是一种用于身份验证的开放标准。它由三个部分组成:头部、载荷和签名。在实现JWT刷新令牌的功能时...
      99+
      2023-09-29
      jwt
    • vue3+ts+axios+pinia实现无感刷新方式
      目录vue3+ts+axios+pinia实现无感刷新vue3无痛刷新(无感刷新)实现过程总结vue3+ts+axios+pinia实现无感刷新 1.先在项目中下载aiXos和pin...
      99+
      2023-05-16
      vue3 ts axios pinia vue3无感刷新 vue3刷新
    • React怎么使用refresh_token实现无感刷新页面
      这篇文章主要介绍了React怎么使用refresh_token实现无感刷新页面的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React怎么使用refresh_token实现无感刷新页面文章都会有所收获,下面我们...
      99+
      2023-06-30
    • GoLang jwt无感刷新与SSO单点登录限制解除的方法是什么
      这篇文章主要介绍了GoLang jwt无感刷新与SSO单点登录限制解除的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇GoLang jwt无感刷新与SSO单点登录限制解除的方法是什...
      99+
      2023-07-05
    • React如何使用refresh_token实现无感刷新页面
      目录步骤如下:具体实现步骤如下: 1-token过期根据refresh_token获取新的token 重新获取数据 2-创建一个新的axios实例 【使用request防止再次进入请...
      99+
      2024-04-02
    • 【Uniapp】小程序携带Token请求接口+无感知登录方案2.0
      本次改进原文《【Uniapp】小程序携带Token请求接口+无感知登录方案》,在实际使用过程中我发现以下bug: 若token恰好在用户访问接口时到期,就会直接查询为空,不反映token过期问题(例如...
      99+
      2023-09-02
      uni-app 小程序 微信小程序 前端 Thinkphp
    • ASP.NET Core怎么实现自动刷新JWT Token
      这篇文章主要介绍了ASP.NET Core怎么实现自动刷新JWT Token的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ASP.NET Core怎么实现自动刷新JWT ...
      99+
      2023-06-30
    • SpringCloud @RefreshScope刷新机制是什么
      今天小编给大家分享一下SpringCloud @RefreshScope刷新机制是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们...
      99+
      2023-07-05
    • @RereshScope刷新的原理是什么
      本文小编为大家详细介绍“@RereshScope刷新的原理是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“@RereshScope刷新的原理是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。在配合配置中心...
      99+
      2023-07-04
    • android dialog刷新的方法是什么
      在Android中,Dialog可以通过以下方法来进行刷新: 使用`invalidate()`方法:可以在Dialog的`View...
      99+
      2023-10-27
      android
    • linux刷新bashrc的方法是什么
      要刷新bashrc文件,可以使用以下方法之一: 使用source命令:在终端中输入以下命令,将会重新加载bashrc文件。 so...
      99+
      2023-10-28
      linux
    • 什么是动态刷新率DRR? Windows11动态刷新率功能介绍
      今天微软推出了首个 Windows 11 预览版本 -- Build 22000.51。在新预览版在对开始菜单、设置 UI、Microsoft Store 和文件管理器进行诸多改进之外,还引入了名为动态刷新率(DRR)的...
      99+
      2023-05-23
      Windows11 动态刷新率
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作