axios响应token

时间: 2024-06-04 14:04:49 浏览: 94

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

在Vue.js应用中，我们经常使用axios库进行HTTP请求。然而，当涉及到用户认证和安全性时，我们需要处理令牌（如JWT或OAuth token）的管理，包括令牌的刷新机制。Vue和axios结合使用时，可以通过设置拦截器来实现自动刷新令牌的功能，确保请求能够不间断地进行。以下是一个关于在Vue中实现axios拦截器处理token刷新机制的实例。我们需要导入axios库，并创建一个http.js文件来集中管理HTTP请求。在这个文件中，我们可以设置axios的全局配置，包括拦截器。代码示例如下： ```javascript import axios from 'axios'; import router from '@/router'; // 导入路由模块 import Vue from 'vue'; // 导入Vue实例 const qs = require("qs"); // 引入qs库，用于处理URL编码 let _this = new Vue(); let isLock = false; let refreshSubscribers = []; // ...其他代码... ``` 接着，我们需要编写几个辅助函数，如`isTokenExpired`来检查token是否过期，`getToken`获取当前token，以及`subscribeTokenRefresh`用于收集需要刷新的请求。 ```javascript // 判断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); } ``` 然后，我们定义`onRefreshed`函数，当新的token获取后，这个函数会遍历`refreshSubscribers`数组并执行每个回调，用新的token重新发起请求。 ```javascript // 刷新请求 function onRefreshed(token) { refreshSubscribers.map(cb => cb(token)) } ``` 接下来，`refreshToken`函数是核心，它负责向服务器发送刷新令牌的请求，并更新本地存储的token。如果刷新失败，用户将被重定向到登录页面。 ```javascript // 刷新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); // 执行数组里的函数，重新发起被挂起的请求 onRefreshed(res.data.data.access_token) // 清空数组中保存的请求 refreshSubscribers = []; }).catch(err => { return err; }); } ``` 我们设置axios的请求和响应拦截器。请求拦截器用于在每次发送请求前检查token是否过期，如果过期则调用`refreshToken`。响应拦截器处理服务器返回的状态码，如果返回401（未授权），则尝试刷新token。 ```javascript axios.interceptors.request.use( config => { let token = getToken(); if (isTokenExpired(token)) { isLock = true; // 设置锁防止多个刷新请求同时发送 return new Promise((resolve, reject) => { refreshToken(config, token, resolve, reject); }); } else { config.headers.Authorization = 'Bearer ' + token; return config; } }, error => Promise.reject(error) ); axios.interceptors.response.use( response => response, error => { if (error.response.status === 401 && !isLock) { const originalRequest = error.config; if (originalRequest.url !== '/refreshToken') { // 避免递归刷新token originalRequest.headers.Authorization = ''; return new Promise((resolve, reject) => { refreshToken(originalRequest, getToken(), resolve, reject); }); } } return Promise.reject(error); } ); ``` 在Vue组件中，我们可以通过订阅的方式来处理请求，这样当token刷新后，请求会被自动重新发送。例如： ```javascript axios.get('/api/data').then(response => { console.log(response.data); }).catch(error => { console.error(error); }).then(() => { // 请求完成，可以在此处处理逻辑 }); // 订阅token刷新 subscribeTokenRefresh((newToken) => { axios.get('/api/data', { headers: { Authorization: `Bearer ${newToken}` } }) .then(response => { console.log(response.data); }).catch(error => { console.error(error); }); }); ``` 通过以上代码，我们实现了Vue下axios拦截器的token刷新机制。当token即将过期或已经过期时，拦截器会自动尝试刷新token并重新发送请求，确保用户体验的连贯性。同时，当刷新失败时，用户会被重定向至登录页面，以保持应用的安全性。

axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js中，它可以发送HTTP请求，并且支持拦截器、取消请求、自动转换JSON等功能。在使用axios发送请求时，可以通过设置请求头部的Authorization字段来携带token信息，以实现登录验证和权限控制等功能。当服务器收到axios发送的HTTP请求时，会检查请求头部中是否携带了Authorization字段，并且对其进行解析验证。如果token验证通过，服务器会根据用户的身份信息返回对应的数据，否则会返回401 Unauthorized等错误状态码。在axios接收到服务器返回的响应后，可以通过拦截器对响应进行处理，在拦截器中可以获取响应头部中的Authorization字段，并根据需要对其进行处理。例如，可以将token存储到本地缓存中，在下一次请求时将其携带到请求头部中。

阅读全文

axios响应token

相关推荐

axios如何利用promise无痛刷新token的实现方法

vue中前端利用refreshToken结合axios拦截器实现token的无感刷新

Axios传token

axios 携带token错误

axios 携带token 401

axios携带token发送后台

axios crsf token 请求头配置

axios 包含token 导入功能file

axios请求携带token

axios设置响应头

axios 无痛刷新token

vue3 ts axios token 代码 小白

axios请求拦截器加token

关于axios中的token是如何使用的

无感刷新token axios拦截器

axios.get()怎么携带token

axios如何利用promise无痛刷新token

axios.post获取响应头中数据

axios二次封装及使用携带token

最新推荐

vue 实现axios拦截、页面跳转和token 验证

vue+ts下对axios的封装实现

vue在响应头response中获取自定义headers操作

Vue二次封装axios为插件使用详解

Vue 前端实现登陆拦截及axios 拦截器的使用

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

vue3 ts axios token 代码小白

c语言从链式队列中获取头部元素并返回其状态的函数怎么写