在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新

简介: 在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新

一、需求背景

对于一些需要记录用户行为的系统,在进行网络请求的时候都会要求传递一下登录的token。不过,为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是30分钟的样子,token过期后就需要重新登录。不过,频繁的登录会造成体验不好的问题,因此,需要体验好的话,就需要定时去刷新token,并替换之前的token。


实现token无感刷新对于前端来说是一项十分常用的技术,其本质都是为了优化用户体验,当token过期时不需要用户调回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已过期。


二、token刷新的方案

1、根据过期时间重新获取

后端返回过期时间,前端判断token过期时间,去调用刷新token的接口。

缺点:需要后端额外提供一个token过期时间的字段;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败。

2、定时刷新token接口

根据token过期时间,写一个定时器,定时刷新token接口

缺点:浪费资源,消耗性能,不建议采用。

3、使用了RefreshToken

后端在登录之后会给前端一个RefreshToken字段同AccessToken一并传过来。token失效后利用RefreshToken去延长用户的登录信息。


三、关于RefreshToken

RefreshToken 方法是现代 Web 应用中一种常见的身份验证机制,尤其在需要长时间保持用户登录状态的场景下具有重要意义。


RefreshToken 方法的主要作用是在用户登录后,服务器生成一个 RefreshToken 并将其返回给客户端。客户端在之后的每次请求中都需要携带这个 RefreshToken,以便服务器能够验证用户身份并返回用户所需的数据。


使用场景包括但不限于:用户在应用中的长时间操作、用户在多个设备上使用应用、用户需要跨域访问应用等。在这些场景下,RefreshToken 方法能够有效地减少用户重复登录的次数,提高用户体验。


四、Refresh Token的优点

  • 安全性增强:Refresh Token不同于AccessToken,它只在第一次获取和刷新时在网络中传输,因此被盗的风险远小于AccessToken。同时,Refresh Token是加密字符串,并且和token是相关联的,相比获取各种资源的token,refresh token的作用仅仅是获取新的token,因此其作用和安全性要求都大为降低。
  • 减少服务器负担:使用Refresh Token刷新服务端不需要刷新Token的过期时间,一旦Token过期,就反馈给前端,前端使用Refresh Token申请一个全新Token继续使用。这种方案中,服务端只需要在客户端请求更新Token的时候对Refresh Token的有效性进行一次检查,大大减少了更新有效期的操作,也就避免了频繁读写。
  • 提高用户体验:由于Refresh Token的存在,用户在访问令牌过期后不需要重新登录,提高了用户体验。


五、Refresh Token的工作原理

  • 当AccessToken过期时,客户端使用Refresh Token发起刷新请求。
  • 认证服务器验证Refresh Token的有效性。
  • 如果Refresh Token有效,认证服务器会生成一个新的AccessToken,并返回给客户端。
  • 客户端收到新的AccessToken后,可以继续使用该token访问受保护资源。


六、Refresh Token的使用流程

  • 首次登录的时候会获取到两个token(AccessToken,RefreshToken)
  • 持久化保存起来(localStorage方案)
  • 正常请求业务接口的时候携带AccessToken
  • 当接口口返回401权限错误时,使用RefreshToken请求接口获取新的AccessToken
  • 替换原有旧的AccessToken,并保存
  • 继续未完成的请求,携带AccessToken
  • RefreshToken也过期了,跳转回登录页面,重新登录


七、Refresh Token的实现步骤

1、登录成功后保存AccessToken,RefreshToken

登录请求登录接口authorization(),这里省略了。

比如我们请求登录接口"authorization"成功后,后端返回我们2个字段。

data:{
    code:200,
    msg:'ok',
    accessToken:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6ImFkbWluIiwiaWF0IjoxMzIyNTc1MDcyOSwiZXhwIjoxNzA2NjMwMzk5fQ.sTLeqLl9lgG4OW40RNXdoZz9NO2bgCOOtnXuErRkXBM',
    RefreshToken:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6ImFkbWluIiwiaWF0IjoxMzIyNTc1MDcyOSwiZXhwIjoxNzA2NjMzMzk5fQ.GF-j_rFEMNwh7H7o4MbM5EFspFC5lQ1zxD85e70nOiM',
}

保存到localStorage里面

localStorage.setItem('accessToken', res.data.data.accessToken);
localStorage.setItem('RefreshToken', res.data.data.RefreshToken);
2、正常请求业务接口的时候携带AccessToken
import axios from 'axios'

// 创建axios实例
const service = axios.create({
  timeout: 20000, // 请求超时时间(毫秒)
})

// 请求拦截器
service.interceptors.request.use((config) => {
  const accessToken = localStorage.getItem('accessToken');
  const RefreshToken = localStorage.getItem('RefreshToken');
  if (config.url) {
    // 此处为 Refresh Token 专用接口,请求头使用 Refresh Token
    if (config.url.indexOf('/refreshToken') >= 0) {
      config.headers['token'] = RefreshToken;
    } else if (!(config.url.indexOf('/login') !== -1 && config.method === 'post')) {
      // 其他接口,请求头使用 Access Token
      config.headers['token'] = accessToken;
    }
    return config;
  }
}, error => {
  return Promise.reject(error);
})
3、响应拦截器处理401权限错误
service.interceptors.response.use(async (response) => {
  let res = response.data
  // 为了演示,这里仅展示处理状态码为401的情况
  if (res.code == '401') {
      // 这里是获取新token的接口,方法在这里省略了。
      const result = await refreshToken()
      // 获取成功
      if (result && result.data) {
        // 新token
        let newToken = result.data
        // 保存新的accessToken
        localStorage.setItem('accessToken', newToken)
        // 替换新accessToken
        response.config.headers.token = newToken
        // 继续未完成的请求
        const resp = await service.request(response.config)
        // 返回请求结果
        return resp
      } else {
        // 清除token
        localStorage.clear()
        // 跳转到登录页
        router.replace('/login')
      }
  }
  return res
}, error => {
  // 返回错误信息
  return Promise.reject(error)
})
4、防止重复请求refreshToken接口

为了防止多次刷新token,可以通过一个变量isRefreshing 去控制是否正在请求刷新token的接口。

响应拦截器处理,防止同时多次调用刷新token接口。

  • 这里使用isRefreshing变量,存放是否正在请求
// 变量isRefreshing
let isRefreshing = false

service.interceptors.response.use(async (response) => {
  let res = response.data
  // 为了演示,这里仅展示处理状态码为401的情况
  if (res.code == '401') {
    // 控制是否在刷新token的状态
    if (!isRefreshing) {
      // 修改isRefreshing状态
      isRefreshing = true
      // 这里是获取新token的接口,方法在这里省略了。
      const result = await refreshToken()
      // 获取成功
      if (result && result.data) {
        // 新token
        let newToken = result.data
        // 保存新的accessToken
        localStorage.setItem('accessToken', newToken)
        // 替换新accessToken
        response.config.headers.token = newToken

        // 继续未完成的请求
        const resp = await service.request(response.config)
        // 重置状态
        isRefreshing = false
        // 返回请求结果
        return resp
      } else {
        // 清除token
        localStorage.clear()
        // 重置状态
        isRefreshing = false
        // 跳转到登录页
        router.replace('/login')
      }
    } 
  }
  return res
}, error => {
  // 返回错误信息
  return Promise.reject(error)
})

5、同时多个请求返回401,需要刷新token

第一个refreshToken接口还没返回,后面的请求又过来了,防止同时多次调用刷新token接口,先把后面这些请求放在一个数组里面,等到refreshToken接口成功后,我们再逐个重试数组里面的请求。


响应拦截器处理,同时多个请求返回401,需要刷新token

  • 这是使用了requestList存放请求队列
// 变量isRefreshing
let isRefreshing = false
// 后续的请求队列
let requestList = []

service.interceptors.response.use(async (response) => {
  let res = response.data
  // 为了演示,这里仅展示处理状态码为401的情况
  if (res.code == '401') {
    // 控制是否在刷新token的状态
    if (!isRefreshing) {
      // 修改isRefreshing状态
      isRefreshing = true
      // 这里是获取新token的接口,方法在这里省略了。
      const result = await refreshToken()
      // 获取成功
      if (result && result.data) {
        // 新token
        let newToken = result.data
        // 保存新的accessToken
        localStorage.setItem('accessToken', newToken)
        // 替换新accessToken
        response.config.headers.token = newToken

        // token 刷新后将数组里的请求队列方法重新执行
        requestList.forEach((cb) => cb(newToken))
        // 重新请求完清空
        requestList = []

        // 继续未完成的请求
        const resp = await service.request(response.config)
        // 重置状态
        isRefreshing = false
        // 返回请求结果
        return resp
      } else {
        // 清除token
        localStorage.clear()
        // 重置状态
        isRefreshing = false
        // 跳转到登录页
        router.replace('/login')
      }
    } else {
      // 后面的请求走这里排队
      // 返回未执行 resolve 的 Promise
      return new Promise(resolve => {
        // 用函数形式将 resolve 存入,等待获取新token后再执行
        requestList.push(newToken => {
          response.config.headers.token = newToken
          resolve(service(response.config))
        })
      })
    }
  }
  return res
}, error => {
  // 返回错误信息
  return Promise.reject(error)
})

八、总结

基本的思路是这样的,你也可以根据自己的业务需要,自己修改。

  • 比如抽离上面的方法或逻辑,单独封装。
  • 你也可以添加接口失败重连的逻辑。
  • 你也可以使用数据加密传输,例如sm4等。


九、代码上传

这里我做了个简单的demo演示,可以到顶部下载。

1、vue项目部分

下载依赖

npm i

启动项目

npm run serve

启动后项目地址为:http://localhost:8080


1、先进入登录页面,点击’登录’按钮,请求’login’接口,接口返回accessToken、RefreshToken。


2、跳转到首页,正常携带token请求’getTableList’接口,接口返回列表数据。


3、下面做了3个按钮来测试接口返回401的状态。

点击1个按钮,用来测试’test1’接口返回401状态,响应拦截器做了处理自动请求’refreshToken’。


连续点击2个或3个按钮,用来测试防止重复请求refreshToken接口。第一个refreshToken接口还没返回,后面的请求又过来了,防止同时多次调用刷新token接口,先把后面这些请求放在一个数组里面,等到refreshToken接口成功后,我们再逐个重试数组里面的请求。

2、nodejs服务部分

做了个简单的nodejs服务,里面写了对应的测试接口。

下载依赖

npm i

启动服务

npm run serve


启动后服务为:http://localhost:3000

为了演示接口401状态,test1、test2、test3接口第1次请求返回401,后面就返回200正常状态。


接口getTableList为普通接口,正常返回数据。


接口login、refreshToken里面的token为模拟的JWT格式的token。


接口refreshToken为了演示,里面做了延迟5s返回数据。

十、效果展示

登录页面

首页

这里是同时点击3个按钮,第1个test1请求返回401后,去请求refreshToken,因为这个接口做了5s延迟,不会立即返回结果,后面test2,test3也都返回401,因为做了判断,所有不会重复去请求refreshToken。等到refreshToken返回结果后,会自动去重新请求请求队列里面的接口。后面陆续返回了test1、test2、test3正常的结果。

目录
打赏
0
3
4
0
17
分享
相关文章
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
272 1
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
147 22
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
291 83
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
208 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
138 10
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
215 1
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
179 58
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略

热门文章

最新文章

  • 1
    vue引入axios出现Module parse failed: Unexpected token (5:2)
    392
  • 2
    基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
    156
  • 3
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    242
  • 4
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    967
  • 5
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    524
  • 6
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    114
  • 7
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    94
  • 8
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    267
  • 9
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    231
  • 10
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    114
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问