token过期如何使用refresh_token实现无感刷新页面？

最新推荐文章于 2025-11-06 12:00:00 发布

原创

最新推荐文章于 2025-11-06 12:00:00 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

步骤如下：

1-token过期根据refresh_token获取新的token 重新获取数据

2-创建一个新的axios实例【使用request防止再次进入请求拦截和请求响应而进入死循环】

3-根据请求相应的响应值是不是401 是：说明token过期

然后进行判断store中的 user :{token:’*****’,refresh_token:’******’}中的 refresh_token和user对象是否存在，如果不存在说明之前没有登录过，直接去登录

4-使用新创建的axios 实例对象 requestFreshToken 发送新的请求 headers中的口令携带的是 refresh_token

5-获取token之后将值重新赋值给user中的token

6-将user重新存入store中

7-重新获取刚才因为token失效而没有获取的数据直接使用request 参数来自error对象中【这里保存了之前token失效的请求数据】

具体实现代码如下：

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import {
  ACCESS_TOKEN,
  FRESH_TOKEN
} from '@/store/mutation-types'
import {
  Message
} from 'element-ui';
// somefile.js
import ls from '@/utils/localStore.js';
const defaultSettings = r