无感刷新token
import axios from 'axios' import store from '@/store' import { Message } from 'element-ui' import router from '@/router' import qs from 'qs' const request = axios.create({ // 配置选项 // baseURL, // timeout }) function redirectLogin () { router.push({ name: 'login', query: { redirect: router.currentRoute.fullPath } }) } function refreshToken () { return axios.create()({ method: 'POST', url: '/front/user/refresh_token', data: qs.stringify({ // refresh_token 只能使用1次 refreshtoken: store.state.user.refresh_token }) }) } // 请求拦截器 // Add a request interceptor request.interceptors.request.use(function (config) { // console.log('接口请求进来了', config) // 通过改写 config 配置信息来实现业务逻辑功能的统一处理 const { user } = store.state if (user && user.access_token) { config.headers.Authorization = user.access_token } // 注意:这里一定要返回 config,发欧洲请求就发布出去 return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // 响应拦截器 let isRfreshing = false // 控制刷新 token 状态 let requests: any[] = [] // 储存刷新 token 期间过来的401请求 request.interceptors.response.use(function (response) { // 状态码为2xx 进入这里 // console.log('请求响应成功了 => ', response) // 如果是自定义错误状态,错误处理就写到这里 return response }, async function (error) { if (error.response) { // 请求收到响应了,但是状态超出了 2xx 的范围 const { status } = error.response if (status === 400) { Message.error('请求参数错误') } else if (status === 401) { // token无效 if (!store.state.user) { redirectLogin() return Promise.reject(error) } // 刷新token if (!isRfreshing) { isRfreshing = true // 开启刷新状态 // 尝试刷新获取新的token return refreshToken().then(res => { if (!res.data.success) { throw new Error('刷新 Token 失败') } // 刷新token 成功了 store.commit('setUser', res.data.content) // 把requests 队列中的请求重新发送出去 return request(error.config) requests.forEach(cb => cb()); // 重置 request数组 requests = [] }).catch(err => { console.log(err) store.commit('setUser', null) redirectLogin() return Promise.reject(error) }).finally(() => { isRfreshing = false }) } // 刷新状态下,把请求挂起放到 requests 数组中 return new Promise(resolve => { requests.push(() => { resolve(request(error.config)) }) }) } else if (status === 403) { Message.error('没有权限,请联系管理员') } else if (status === 404) { Message.error('请求资源不存在') } else if (status >= 500) { Message.error('服务端错误,请联系管理员') } } else if (error.request) { // 请求发出去没有收到响应 // console.log(error.request); Message.error('请求超时,请刷新重试') } else { // 在设置请求时发生的错误 // console.log('Error', error.message); Message.error(`请求失败:${error.message}`) } console.log(error.config); // 把请求失败的错误对象继续抛出,扔给下一个上一个调用者 return Promise.reject(error); }) export default request
本文来自博客园,作者:{春光牛牛,yak},转载请注明原文链接:https://www.cnblogs.com/yakniu/p/16307168.html
欢迎各位大佬们评论指正
QQ讨论群:610129902