如何封装Vue中使用Axios获取并管理临时token的示例代码？

本文共计1736个文字，预计阅读时间需要7分钟。

前言：为什么非要写这个博客呢？因为这件事让我有一种蠢蠢欲动的优越感。接下来的都别问，反问我也不想说。因为流程图我都不想画（懒得到）。+ 开发架构：前端页面：Vue；网络请求：Axios；方式：

前言

为什么非要写这个博客呢？因为这件事让我有一种蛋蛋的优疼。剩下的都别问，反正问我也不会说。因为流程图我都不想（懒得）画。

开发架构

前端页面：Vue

网络请求：Axios;方式：vue add axios

缓存方案

全局变量：Vuex

本地缓存：LocalStorage

技术依赖

你猜？

背景

公司开发一个嵌入App的Web页面，安全方面使用老套路：App通过URL传参给前端（包含签名），前端把参数透传给H5后端验签，完事儿之后前端再决定用户是否合法。另外定义了N个JS方法前端根据固定GET参数判断是安卓还是苹果来调用。

初步设想

关于token设计方案的初步设想是这样的：第一次进入的时候获取token，后端检查签名是否通过。不通过则弹框请从合法途径进入页面并且不消失。

否则就可以让用户继续后续操作，直到后端返回token过期特定状态码回来前端在用户无感的情况下调用JS方法重新获取URL参数请求token，完事儿之后继续用户的请求操作。