首页 > 其他分享 >前端如何实现token的无感刷新

前端如何实现token的无感刷新

时间:2024-03-12 09:46:50浏览次数:27  
标签:return error 无感 token 刷新 data response

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

要做到token的无感刷新,主要有3种方案:

方案一:

后端返回过期时间,前端每次请求就判断token的过期时间,如果快到过期时间,就去调用刷新token接口。

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

方法二

写个定时器,然后定时刷新token接口。
缺点:浪费资源,消耗性能,不建议采用。

方法三

在请求响应拦截器中拦截,判断token 返回过期后,调用刷新token接口。

综合上面的三个方法,最好的是第三个,因为它不需要占用额外的资源。接下来,我们看一下使用axios进行网络请求,然后响应service.interceptors.response的拦截。

  1. import axios from 'axios'
  2. service.interceptors.response.use(
  3. response => {
  4. if (response.data.code === 409) {
  5. return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
  6. const { token } = res.data
  7. setToken(token)
  8. response.headers.Authorization = `${token}`
  9. }).catch(err => {
  10. removeToken()
  11. router.push('/login')
  12. return Promise.reject(err)
  13. })
  14. }
  15. return response && response.data
  16. },
  17. (error) => {
  18. Message.error(error.response.data.msg)
  19. return Promise.reject(error)
  20. }

)问题一:如何防止多次刷新token

为了防止多次刷新token,可以通过一个变量isRefreshing 去控制是否在刷新token的状态。

  1. import axios from 'axios'
  2. service.interceptors.response.use(
  3. response => {
  4. if (response.data.code === 409) {
  5. if (!isRefreshing) {
  6. isRefreshing = true
  7. return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
  8. const { token } = res.data
  9. setToken(token)
  10. response.headers.Authorization = `${token}`
  11. }).catch(err => {
  12. removeToken()
  13. router.push('/login')
  14. return Promise.reject(err)
  15. }).finally(() => {
  16. isRefreshing = false
  17. })
  18. }
  19. }
  20. return response && response.data
  21. },
  22. (error) => {
  23. Message.error(error.response.data.msg)
  24. return Promise.reject(error)
  25. }
  26. )

二、同时发起两个或者两个以上的请求时,怎么刷新token

当第二个过期的请求进来,token正在刷新,我们先将这个请求存到一个数组队列中,想办法让这个请求处于等待中,一直等到刷新token后再逐个重试清空请求队列。
那么如何做到让这个请求处于等待中呢?为了解决这个问题,我们得借助Promise。将请求存进队列中后,同时返回一个Promise,让这个Promise一直处于Pending状态(即不调用resolve),此时这个请求就会一直等啊等,只要我们不执行resolve,这个请求就会一直在等待。当刷新请求的接口返回来后,我们再调用resolve,逐个重试。

  1. import axios from 'axios'
  2. // 是否正在刷新的标记
  3. let isRefreshing = false
  4. //重试队列
  5. let requests = []
  6. service.interceptors.response.use(
  7. response => {
  8. //约定code 409 token 过期
  9. if (response.data.code === 409) {
  10. if (!isRefreshing) {
  11. isRefreshing = true
  12. //调用刷新token的接口
  13. return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
  14. const { token } = res.data
  15. // 替换token
  16. setToken(token)
  17. response.headers.Authorization = `${token}`
  18. // token 刷新后将数组的方法重新执行
  19. requests.forEach((cb) => cb(token))
  20. requests = [] // 重新请求完清空
  21. return service(response.config)
  22. }).catch(err => {
  23. //跳到登录页
  24. removeToken()
  25. router.push('/login')
  26. return Promise.reject(err)
  27. }).finally(() => {
  28. isRefreshing = false
  29. })
  30. } else {
  31. // 返回未执行 resolve 的 Promise
  32. return new Promise(resolve => {
  33. // 用函数形式将 resolve 存入,等待刷新后再执行
  34. requests.push(token => {
  35. response.headers.Authorization = `${token}`
  36. resolve(service(response.config))
  37. })
  38. })
  39. }
  40. }
  41. return response && response.data
  42. },
  43. (error) => {
  44. Message.error(error.response.data.msg)
  45. return Promise.reject(error)
  46. }
  47. )

更多建站及源码交易信息请见 GoodMai 好买网

标签:return,error,无感,token,刷新,data,response
From: https://www.cnblogs.com/mounterLove/p/18066078

相关文章

  • 清除缓存问题 localStorage浏览器本地缓存需清除网站数据 sessionStorage 创建各自的
    localStorage浏览器本地缓存pc需清除网站数据,或者开启新的无痕网页移动端app需进入设置页面,点击“清除浏览数据”选项;pc端的开启无痕就相当于开启一个新的浏览器无痕项目,但是app端开启无痕不会自动先清除之前已保存的数据sessionStorage浏览器页面缓存Window.sessionStorage......
  • 网站 url 跳转 刷新打不开 但回车能打开 刷新不能访问但回车 能访问
    可能是跨域问题,可以对比两个网址的curl参数,有一个缺少Referer:https://account.wps.cn/  例如:curl^"https://authserver.gdmu.edu.cn/authserver/login?service=https^%^3A^%^2F^%^2Fms.gdmu.edu.cn^%^2Floginwps^"^-H"Accept:text/html,application/xhtml+xml,applic......
  • spring-boot spring-security oauth2 /oauth/token报401,403 问题
    2024-03-1012:20:55.281INFO58776---[nio-8002-exec-2]o.s.web.servlet.DispatcherServlet:InitializingServlet'dispatcherServlet'2024-03-1012:20:55.283INFO58776---[nio-8002-exec-2]o.s.web.servlet.DispatcherServlet:Completedi......
  • 使用Tokeniser估算GPT和LLM服务的查询成本
    将LLM集成到项目所花费的成本主要是我们通过API获取LLM返回结果的成本,而这些成本通常是根据处理的令牌数量计算的。我们如何预估我们的令牌数量呢?Tokeniser包可以有效地计算文本输入中的令牌来估算这些成本。本文将介绍如何使用Tokeniser有效地预测和管理费用。大语言模型(如GPT)......
  • Basic认证和Bearer Token认证的区别
    前端发送POST请求服务器端数据时,通过使用两种认证方式:【1】Basic用户名密码认证 【2】Bearertoken认证这两种都是在请求头中存放:Authorization 认证信息 来请求服务端,服务端通过校验认证信息的正确性来判断用户的身份是否合法,那这两种有啥区别呢?? Basictoken和Beare......
  • JSON.parse解析字符串报错-SyntaxError: Unexpected token ‘ in JSON at position 报
    “SyntaxError:Unexpectedtoken’inJSONatposition”报错原因是因为解析的字符串对象中,JSON.parse无法识别;JSON.parse可以将标准的json类型数据转换为JavaScript对象,如果数据不是正确的json类型的数据则会控制台报错,可能会阻断代码的正常运行我们可以写一个函数来......
  • ApiFox-token
    标题:ApiFox-token功能:使用ApiFox->1-登入接口->2-获取token-->3-token变成"环境变量"-->4-后面的接口使用这个"token"1-登入功能(按步骤操作)2-登入功能(附加:后置操作)2.5-补充重点是:JsonPath表达式:$.data.token对照下面‘图片的返回值’......
  • 关于pacemaker-集群-token-网络心跳检测时间的修改
    在笔者操作系统Redhat8.8中,pacemaker默认的token时间为3000毫秒,也可以理解成心跳检测时间这样根据默认的规则,consensus有时间如果没有特别指定的话,将是token*1.2,即3600毫秒[root@azdb01qq-5201351]#corosync-cmapctl|grep'totem.token\|consensus'runtime.config.tote......
  • SWR " stale-while-revalidate " 立即使用缓存数据 + 后台异步刷新
    在软件开发中,SWR是"stale-while-revalidate"的首字母缩写,这是一种在网络应用(尤其是Web应用)中用于数据获取和缓存的策略。这个策略最早由Next.js团队提出并在其数据获取库next/swr中实现了这个思想。SWR的工作原理如下:立即使用缓存数据:当页面首次加载或数据需要更......
  • 19.提取token为全局(可以跨线程组)
    1:先提取token值--以下是json提取 2:后置处理beanshell执行__setProperty函数,access_token用新属性token替换3:在测试计划--用户定义的变量-设置全局token--用__P函数去取  ......