vue下axios拦截器token刷新机制的实例代码_axios拦截器

ios

109 浏览量更新于2023-03-03 评论收藏 53KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue下下axios拦截器拦截器token刷新机制的实例代码刷新机制的实例代码

//创建http.js文件，以下是具体代码：

//引入安装的axios插件

import axios from 'axios'

import router from '@/router';

import Vue from 'vue'

const qs = require("qs");

let _this = new Vue();

let isLock = false;

let refreshSubscribers = [];

//判断token是否过期

function isTokenExpired(token) {

let expires_time = JSON.parse(token).expires_time;

let curentTime = new Date().getTime();

if (curentTime >= expires_time) {

return true;

} else {

return false;

}

//获取Token对象

function getToken() {

return localStorage.getItem("token");

}

//push所有请求到数组中

function subscribeTokenRefresh(cb) {

refreshSubscribers.push(cb)

}

//刷新请求（refreshSubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）

function onRrefreshed(token) {

refreshSubscribers.map(cb => cb(token))

}

//刷新token

function refreshToken(config, token, resolve, reject) {

let data = { refresh_token: JSON.parse(token).refresh_token };

axios({

method: "post",

url: "xxxxxx/refreshToken",//刷新token的接口

headers: {

"Content-Type": "application/x-www-form-urlencoded",

"Authorization": "Basic b3JkZXItc2VydmVyOjEyMzQ1Ng=="

data: qs.stringify(data)

}).then(res => {

isLock = false;//释放锁

if (res.data.code === 101) {

_this.$message.error('登录状态已失效，请重新登录。');

localStorage.removeItem("token");

router.push({

path: "/login"

});

return;

}

let expires_time = new Date().getTime() + parseInt(res.data.data.expires_in * 0.8) * 1000;

let token = JSON.parse(localStorage.getItem("token"));

token.expires_time = expires_time;

token.access_token = res.data.data.access_token;

localStorage.setItem("token", JSON.stringify(token));

config.headers.Authorization = 'Bearer ' + res.data.data.access_token;

resolve(config);

//执行数组里的函数,重新发起被挂起的请求

onRrefreshed(res.data.data.access_token)

//清空数组中保存的请求

refreshSubscribers = [] }).catch(err => {

return err;

});

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38595850

粉丝: 7
资源: 902

会员权益专享

vue下axios拦截器token刷新机制的实例代码

评论0

会员权益专享

最新资源

vue下axios拦截器token刷新机制的实例代码

评论0

Vue中登录验证成功后保存token,并每次请求携带并验证token操作

vue的token刷新处理的方法

基于Spring Cloud、OAuth2.0开发基于Vue前后分离的开发平台 vue 前端资源

vue3 axios拦截器使用token

vue3 axios 全局加载token

vue axios拦截器

vue封装axios接收token封装

vue 拦截器 axios timeout

vue的封装axios获取token

vue 给axios添加请求拦截

vue3在axios封装拦截器

vue登录时被axios拦截token存不进去调不出来接口

axios vue怎么从请求头里获取token

vue对axios的封装使用

使用vue封装axios

vue 无感刷新token

vue3 axios封装请求代码

vue3 axios封装

vue 封装token，请求拦截器存储token

vue封装axios请求 代码举例说明

会员权益专享

最新资源

vue封装axios请求代码举例说明