当前位置： 首页 > article >正文

双token无感刷新

article 2024/9/27 3:14:37

文章目录

  • 🟢双token无感刷新
    • 1、token过期续期的五种方案对比
    • 2、双token的基本概念
    • 3、双token无感刷新的原理
    • 4、双token无感刷新的实现方式
    • 5.前端实现
  • ✒️总结

🟢双token无感刷新

在这里插入图片描述

对于token无感刷新这个东西有复杂度的话，它主要在后端，它前端有啥复杂度，我估计吧，可能大多数对这个无感token刷新的概念不清除。所以本篇文章主要针对这块梳理一下。
双token无感刷新是一种在Web开发中常用的安全及用户体验优化技术，主要涉及到两种类型的token：Access Token（访问令牌）和Refresh Token（刷新令牌）。以下是对双token无感刷新的详细解释

1、token过期续期的五种方案对比

  • token过期后
    • 方案一：跳登录页=>突然需要登录体验不好
    • 方案二:刷新token重新发=>一直不用登录(但也可以设置过期时间)
    • 方案三:每次请求都刷新token=>服务器计算压力大
    • 方案四:token不过期、redis记录过期=>服务端维护用户身份
    • 方案五:双token（token1正常使用、token2用来刷新token）

2、双token的基本概念

  • Access Token（访问令牌）：
    • 用户直接用于访问受保护资源的凭证。
    • 有效期较短，通常几分钟到几小时，一旦过期，用户需要重新认证以获取新的Access Token。
    • 即使Access Token被泄露，由于其有效期短，攻击者利用它进行不当操作的时间窗口有限。
  • Refresh Token（刷新令牌）：
    • 用于在Access Token过期后或过期前的一个定时间内重新获取新的Access Token。
    • 有效期通常较长，甚至可以说是永久的，但出于安全考虑，一般会设置过期时间或使用次数限制。
    • Refresh Token通常不会直接发送给客户端，而是保存在服务器端或经过加密后存储在客户端本地（如localStorage或sessionStorage）。

3、双token无感刷新的原理

双token无感刷新的核心在于自动在后台处理Access Token的过期和刷新过程，而无需用户重新登录或感知到这一过程。具体步骤如下：
1.用户登录

  • 用户通过用户名(账号)、密码或其他认证方式向认证服务器请求授权。
  • 认证成功后，服务器返回Access Token和Refresh Token给前端。

2.请求受保护资源

  • 前端在访问受保护资源时，将Access Token放入请求头中发送给后端。
  • 如果Access Token有效，后端正常处理请求并返回结果。

3.请求受保护资源

  • 如果Access Token过期，后端会返回一个错误响应（如HTTP 401 Unauthorized）。
  • 前端在接收到错误响应后，自动在后台使用Refresh Token向认证服务器请求新的Access Token。
  1. 刷新Access Token
  • 认证服务器验证Refresh Token的有效性后，返回一个新的Access Token和（可选的）新的Refresh Token。
  • 前端更新本地存储的Access Token和Refresh Token，并重新发起之前的请求。

4、双token无感刷新的实现方式

双token无感刷新的实现通常依赖于前端和后端的配合。以下是一个简化的实现流程：

  1. 前端：
    • 在请求拦截器中拦截请求，检查Access Token是否即将过期或已过期。
    • 如果Access Token过期，则自动使用Refresh Token请求新的Access Token，并更新本地存储。
    • 将之前因Access Token过期而失败的请求重新发起。
  2. 将之前因Access Token过期而失败的请求重新发起。
    • 验证Access Token的有效性。。
    • 如果Access Token过期，返回错误响应，并允许使用Refresh Token来刷新Access Token。
    • 验证Refresh Token的有效性，并返回新的Access Token和（可选的）新的Refresh Token。

5.前端实现

  • 设置全局Axios拦截器
import axios from 'axios';  
import store from './store'; // 假设你有一个Vuex或Redux等状态管理库  
  
// 创建axios实例  
const service = axios.create({  
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url  
  timeout: 5000 // 请求超时时间  
});  
  
// 请求拦截器  
service.interceptors.request.use(  
  config => {  
    // 从状态管理库或其他地方获取token  
    const accessToken = store.getters.accessToken;  
    if (accessToken) {  
      config.headers['Authorization'] = `Bearer ${accessToken}`;  
    }  
    return config;  
  },  
  error => {  
    // 处理请求错误  
    console.error('请求错误:', error); // for debug  
    Promise.reject(error);  
  }  
);  
  
// 响应拦截器  
service.interceptors.response.use(  
  response => {  
    // 响应正常则返回  
    return response;  
  },  
  error => {  
    // 响应错误处理  
    const { config, response, code } = error;  
    // 检查是否是401错误（未授权），且是由于token过期导致  
    if (response && response.status === 401 && response.data.code === 'TOKEN_EXPIRED') {  
      // 调用刷新token的函数  
      return refreshToken(config).then(accessToken => {  
        // token刷新成功，重新请求  
        config.headers['Authorization'] = `Bearer ${accessToken}`;  
        return service(config);  
      }).catch(err => {  
        // token刷新失败，清除tokens并跳转到登录页面  
        store.commit('clearTokens');  
        // 你可以在这里进行页面跳转等操作  
        window.location.href = '/login';  
        return Promise.reject(err);  
      });  
    }  
    // 其他错误直接返回  
    return Promise.reject(error);  
  }  
);  
  
// 刷新token的函数  
function refreshToken(config) {  
  return new Promise((resolve, reject) => {  
    const refreshToken = store.getters.refreshToken;  
    if (!refreshToken) {  
      reject('No refresh token');  
    }  
  
    // 发送请求以刷新token  
    axios.post('/api/auth/refresh-token', { refreshToken })  
      .then(response => {  
        // 更新state中的token  
        store.commit('updateAccessToken', response.data.accessToken);  
        resolve(response.data.accessToken);  
      })  
      .catch(err => {  
        reject(err);  
      });  
  });  
}  
  
export default service;
  • 状态管理（Vuex示例）
// store.js  
const store = new Vuex.Store({  
  state: {  
    accessToken: localStorage.getItem('accessToken') || '',  
    refreshToken: localStorage.getItem('refreshToken') || ''  
  },  
  getters: {  
    accessToken: state => state.accessToken,  
    refreshToken: state => state.refreshToken  
  },  
  mutations: {  
    updateAccessToken(state, accessToken) {  
      state.accessToken = accessToken;  
      localStorage.setItem('accessToken', accessToken);  
    },  
    clearTokens(state) {  
      state.accessToken = '';  
      state.refreshToken = '';  
      localStorage.removeItem('accessToken');  
      localStorage.removeItem('refreshToken');  
    }  
  }  
});  
  
export default store;

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见


http://www.kler.cn/news/321197.html

相关文章：

  • AI大语言模型的全面解读
  • 828华为云征文｜使用Flexus X实例安装宝塔面板教学
  • 1 elasticsearch安装
  • 什么是开放式耳机？具有什么特色？非常值得入手的蓝牙耳机推荐
  • 【C++位图】构建灵活的空间效率工具
  • 计算机毕业设计选题推荐-基于python的养老院数据可视化分析
  • R18 NES 之SSB-less SCell operation for inter-band CA
  • 基于vue框架的宠物寻回小程序8g7el（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
  • MATLAB系列09：图形句柄
  • 论文解读《Object-Centric Learning with Slot Attention》
  • 网络模型的保存与读取
  • Testbench编写与Vivado Simulator的基本操作
  • 如何快速免费搭建自己的Docker私有镜像源来解决Docker无法拉取镜像的问题（搭建私有镜像源解决群晖Docker获取注册表失败的问题）
  • 解决SVN蓝色问号的问题
  • 线性基学习DAY2
  • Kafka 面试题
  • 一个证明-待验证
  • 平衡、软技能与持续学习
  • pdf编辑转换器怎么用？分享9个pdf编辑、转换方法（纯干货）
  • 基于深度学习的药品三期OCR字符识别
  • 生成式语言模型底层技术面试
  • 修改Docker默认存储路径，解决系统盘占用90%+问题(修改docker root dir)
  • 【笔记】数据结构|链表算法总结|快慢指针场景和解决方案|链表归并算法和插入算法|2012 42
  • 共享单车轨迹数据分析：以厦门市共享单车数据为例（八）
  • 爬虫过程 | 蜘蛛程序爬取数据流程（初学者适用）
  • P335_0334韩顺平Java_零钱通介绍
  • 华为NAT ALG技术的实现
  • AttributeError: ‘Sequential‘ object has no attribute ‘predict_classes‘如何解决
  • 【Python报错已解决】ModuleNotFoundError: No module named ‘psutil’
  • Android——运行时动态申请权限