axios使用异步方式无感刷新token，简单，太简单了

迷南。 2024-05-04 08:15 110阅读 0赞

文章目录

    • ? 废话在前
    • ? 接着踩坑
    • ? 解决思路
    • ? 完整代码

? 废话在前

写vue的伙伴们无感刷新token相信大家都不陌生了吧，刚好，最近自己的一个项目中就需要用到这个需求，因为之前没有弄过这个，研究了一个上午，终于还是把它拿下了，小小的一个token刷新?。

在这里插入图片描述

下面接着分析一下踩到的坑以及解决思路

? 接着踩坑

我按照之前传统的方式在返回拦截器里面进行token刷新，正常的数据可以返回，但是这个时候会有比较麻烦的地方，就是请求的数据可以在拦截器里面得到，但是不能渲染到界面上（看到这里的时候我是懵的）。

看一下代码

  1. service.interceptors.response.use(
  2.   response => {
  4.     const res = response.data
  5.     //刷新token的时候，可以从这里拦截到新数据，但是没有显示在页面上
  6.     console.log('拦截数据：',res)
  7.     if (loadingInstance) {
  9.       loadingInstance.close();
  10.       NProgress.done();
  11.     }
  12.     switch (res.code) {
  14.       case 200:
  15.         return res
  16.       case 401:
  17.         router.push({
  19.           path: "/login",
  20.         })
  21.         localStorage.clear();
  22.         Notification.error({
  24.           title: '令牌过期',
  25.           message: '当前身份信息超过三天已失效，请您重新登录',
  26.           duration: 0
  27.         });
  28.         break;
  29.       default:
  30.         Message({
  32.           message: res.message || '请求错误',
  33.           type: 'error',
  34.           duration: 5 * 1000
  35.         })
  36.         break;
  37.     }
  38.   },
  39.   error => {
  41.     switch (error.response.status) {
  43.       case 401:
  44.         MessageBox.confirm('身份认证已过期，是否刷新本页继续浏览？', '提示', {
  46.           confirmButtonText: '继续浏览',
  47.           cancelButtonText: '退出登录',
  48.           type: 'warning'
  49.         }).then(() => {
  51.           axios.post('/api/token/refresh/', {
  53.             refresh: localStorage.getItem("retoken")
  54.           }).then(response => {
  56.             let res = response.data || {
  57.     }
  58.             if (res.code == 200) {
  60.               let token = res.data.result;
  61.               localStorage.setItem("token", token.access);
  62.               localStorage.setItem("retoken", token.refresh);
  63.               error.response.config.baseURL = '';
  64.               error.response.config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token")
  65.               window.location.reload();
  66.             } else {
  68.               router.push({
  70.                 path: "/login",
  71.               })
  72.               localStorage.clear();
  73.               Notification.error({
  75.                 title: '令牌过期',
  76.                 message: '当前身份信息超过三天已失效，请您重新登录',
  77.                 duration: 0
  78.               });
  79.             }
  80.           }).catch(err => {
  82.             router.push({
  84.               path: "/login",
  85.             })
  86.             localStorage.clear();
  87.             Notification.error({
  89.               title: '认证失败',
  90.               message: '信息认证失败，请重新登录',
  91.               duration: 0
  92.             });
  93.           })
  94.         }).catch(() => {
  96.           router.push({
  98.             path: "/login",
  100.           })
  101.           Message({
  103.             message: '已退出',
  104.             type: 'success',
  105.           })
  106.           localStorage.clear();
  107.         });
  108.         break;
  109.       case 404:
  110.         Notification.error({
  112.           title: '404错误',
  113.           message: '服务器请求错误，请联系管理员或稍后重试。错误状态码：404',
  114.         });
  115.         break
  116.       default:
  117.         Notification.error({
  119.           title: '请求错误',
  120.           message: '服务器请求错误，请联系管理员或稍后重试',
  121.         });
  122.         break;
  123.     }
  124.     if (loadingInstance) {
  126.       loadingInstance.close();
  127.       NProgress.done();
  128.     }
  129.     return Promise.reject(error);
  131.   }
  132. )

懵归懵，好在已经发现这个问题了，剩下的怎么解决呢？

当时想的是和后端配合，让后端直接发一个token过期的时间戳给我，我直接把这个时间戳放到localStrage里面，通过这个localStrage，直接在前端进行判断token的过期时间进行请求拦截，如果当前请求的时间大于了这个localStrage里面的时间，就说明token过期了，我这边就需要重新请求token了，而不要后端去进行token的验证。

信心满满的弄了一下，发现行不通，token过期的时候，后端直接一个错误401，前端就又回到解放前了。而且用时间戳的方式很容易出现bug，且在前端进行token时长的验证，很容易出现问题。因此，我还是觉得再研究一下上面那一段代码。

当然踩到坑不只是这个，还有百度和chatGPT，真的，看了一下没有找到一个可行的，总结一下主要有以下几种

  1. 状态管理vuex
  2. 路由router
  3. 时间戳（和我刚刚那种方式差不多）
  4. 依赖注入inject
  5. 刷新界面（我最开始那种方式，但是刷新的时候会出现页面白屏，且用户如果在页面上有一些自己输入的数据也会被清空，用户体验感不好）

以上方式我先不管行不行，但是麻烦是肯定的，做前端讲究的就一个字：“懒”
不是，应该是 “高效快捷”
所以这些方式就pass掉了

只能想想为什么拦截器里面可以得到数据，为什么页面位置得不到数据了

? 解决思路

下面是我的解决思路，有什么不对的地方还请看到的大神指出来一下?

当用户发起请求的时候，因为刷新token的http状态码是401，这个时候axios的响应拦截器就直接进行错误捕获了，到了这里，因为数据已经返回了，但是因为是错误数据，页面得到的这个数据不可用且当前请求已经结束了，当然这里对状态码401是进行处理了的（应该获取token了）。

采用普通的获取方式来获取token，因为异步的原因，我们获取token的同时页面也在做刷新，token获取的同时，界面也刷新完毕了（但是是没有数据的，不做错误捕获会报错），因此我们在获取token完毕，且用新的token去获取数据时，拦截器里面会有数据，但是界面已经休息了，就不会把拦截器里面的新数据刷新到页面了。

因此这个地方需要对获取token的过程进行一下请求阻塞，把获取token的请求变成同步的。到这里就差不多了。直接把响应拦截器里面的error函数变成同步不就行了吗，async + await可以出来了。

以上是自己当时的想法，简单说来就是 页面刷新需要慢我获取token一步 ，通过这个方式也确实做到了无感刷新?

希望以上的能帮助到你，有什么好的思路也欢迎评论区指出。

? 完整代码

这个是用了2.13.2版本的element-ui以及nprogress的一个axios代码模块，包含了一个下载文件的模块。

如果需要的话可以根据自己的需求来进行修改

  1. import axios from 'axios'
  2. import {
  4.   Message,
  5.   Loading,
  6.   Notification,
  7. } from 'element-ui'
  8. import NProgress from 'nprogress' // progress bar
  9. import 'nprogress/nprogress.css' // progress bar style
  10. import router from '@/router/index'
  11. const baseURL = '/api'
  12. const service = axios.create({
  14.   baseURL,
  15.   timeout: 6000
  16. })
  17. NProgress.configure({
  19.   showSpinner: false
  20. }) // NProgress Configuration
  21. let loadingInstance = undefined;
  22. service.interceptors.request.use(
  23.   config => {
  25.     NProgress.start()
  26.     loadingInstance = Loading.service({
  28.       lock: true,
  29.       text: '正在加载，请稍候...',
  30.       spinner: 'el-icon-loading',
  31.       background: 'rgba(0, 0, 0, 0.3)'
  32.     })
  33.     config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token")
  34.     return config;
  35.   },
  36.   error => {
  38.     return Promise.reject(error)
  39.   }
  40. )
  42. service.interceptors.response.use(
  43.   response => {
  45.     const res = response.data
  47.     if (loadingInstance) {
  49.       loadingInstance.close();
  50.       NProgress.done();
  51.     }
  52.     switch (res.code) {
  54.       case 200:
  55.         return res
  56.       case 401:
  57.         router.push({
  59.           path: "/login",
  60.         })
  61.         localStorage.clear();
  62.         Notification.error({
  64.           title: '认证失效',
  65.           message: '当前身份信息超过三天已失效，请您重新登录',
  66.           duration: 0
  67.         });
  68.         break;
  69.       default:
  70.         Message({
  72.           message: res.message || '请求错误',
  73.           type: 'error',
  74.           duration: 5 * 1000
  75.         })
  76.         break;
  77.     }
  78.   },
  79.   async error => {
  81.     switch (error.response.status) {
  83.       case 401:
  84.         const err401Data = error.response.data || {
  85.     }
  86.         if (err401Data.code !== "token_not_valid") {
  88.           router.push({
  90.             path: "/login",
  91.           })
  92.           localStorage.clear();
  93.           Notification.error({
  95.             title: '认证失败',
  96.             message: '身份信息认证失败，请您重新登录',
  97.             duration: 0
  98.           });
  99.           return
  100.         }
  101.         try {
  103.           const res = await service.post('/token/refresh/', {
  105.             refresh: localStorage.getItem("retoken")
  106.           })
  107.           if (res.code == 200) {
  109.             let token = res.data.result;
  110.             localStorage.setItem("token", token.access);
  111.             localStorage.setItem("retoken", token.refresh);
  112.             error.response.config.baseURL = ''
  113.             error.response.config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token")
  114.             return service(error.response.config)
  115.           } else {
  117.             router.push({
  119.               path: "/login",
  120.             })
  121.             localStorage.clear();
  122.             Notification.error({
  124.               title: '认证失败',
  125.               message: '当前身份认证信息已失效，请您重新登录',
  126.               duration: 0
  127.             });
  128.           }
  129.         } catch (error) {
  131.           router.push({
  133.             path: "/login",
  134.           })
  135.           localStorage.clear();
  136.           Notification.error({
  138.             title: '认证失败',
  139.             message: '身份认证失败，请您重新登录，失败原因：' + error.message,
  140.             duration: 0
  141.           });
  142.         }
  144.         break
  145.       case 404:
  146.         Notification.error({
  148.           title: '404错误',
  149.           message: '服务器请求错误，请联系管理员或稍后重试。错误状态码：404',
  150.         });
  151.         break
  152.       default:
  153.         Notification.error({
  155.           title: '请求错误',
  156.           message: '服务器请求错误，请联系管理员或稍后重试',
  157.         });
  158.         break;
  159.     }
  160.     if (loadingInstance) {
  162.       loadingInstance.close();
  163.       NProgress.done();
  164.     }
  165.     return Promise.reject(error);
  167.   }
  168. )
  170. // 文件下载通用方式
  171. export const requestFile = axios.create({
  173.   baseURL,
  174.   timeout: 0, //关闭超时时间
  175. });
  177. requestFile.interceptors.request.use((config) => {
  179.   config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token") //携带的请求头
  180.   config.responseType = 'blob';
  181.   loadingInstance = Loading.service({
  183.     lock: true,
  184.     text: '正在下载，请稍候...',
  185.     spinner: 'el-icon-loading',
  186.     background: 'rgba(0, 0, 0, 0.3)'
  187.   })
  188.   return config;
  189. });
  191. requestFile.interceptors.response.use(
  192.   (response) => {
  194.     let res = response.data;
  195.     if (loadingInstance) {
  197.       loadingInstance.close()
  198.     }
  199.     // const contentType = response.headers['content-type'];//获取返回的数据类型
  200.     let blob = new Blob([res], {
  202.       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" //文件下载以及上传类型为 .xlsx
  203.     });
  204.     let url = window.URL.createObjectURL(blob);
  205.     // 创建一个链接元素
  206.     let link = document.createElement('a');
  207.     link.href = url;
  208.     link.download = '产品列表.xlsx'; // 自定义文件名
  209.     link.click();
  212.   },
  213.   (err) => {
  215.     Message({
  217.       message: '操作失败，请联系管理员',
  218.       type: 'error',
  219.     })
  220.     if (loadingInstance) {
  223.       loadingInstance.close()
  224.     }
  225.   }
  226. );
  229. export default service;

发表评论

表情：
评论列表 （有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

    相关 axios简单使用

    > 学习笔记 一、简介 1. axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和node.js中。 2. 本质：发送请求，获得相对应的响应结

    悠悠悠悠/ 0 赞/ 63 阅读