网站广告怎么赚钱,点赞排行 wordpress,查网站死链必用工具,淘宝客网站开发视频教程两种方案#xff0c;第一种记录登录时间#xff0c;根据后台设置的token过期时间#xff0c;进行在时间内请求更换token 第二种利用axios的拦截#xff0c;在返回token过期时#xff0c;那么token去更换token#xff0c;再用新的token去请求数据。 第二种#xff0c;上代…两种方案第一种记录登录时间根据后台设置的token过期时间进行在时间内请求更换token 第二种利用axios的拦截在返回token过期时那么token去更换token再用新的token去请求数据。 第二种上代码
import axios from axios
import { Message } from element-ui
import store from /store
import { getToken } from /utils/authvar isRefreshing false
var requests []
// create an axios instance
const service axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000 // request timeout
})// request interceptor
service.interceptors.request.use(config {if (store.getters.token) {config.headers[Authorization] Bearer getToken()}return config},error {console.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return response response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response {const res response.dataconsole.log(res, response.data)if (res.code 1) {return res} else if (res.code 50008 || res.code 50012 || res.code 50014) {const config response.configif (!isRefreshing) {isRefreshing truereturn store.dispatch(user/resetToken).then((res) {const token resconfig.headers[Authorization] tokenconfig.baseURL // url已经带上了/api避免出现/api/api的情况requests.forEach(item item(token))requests []// 重试当前请求并返回promise// console.log(service(config), service(config))return service(config)}).catch(err {console.log(err)// console.error(refreshtoken error , res)// 刷新token失败神仙也救不了了跳转到首页重新登录吧window.location.href /}).finally(() {isRefreshing false})} else {return new Promise((resolve) {// 将resolve放进队列用一个函数形式来保存等token刷新后直接执行requests.push((token) {config.baseURL config.headers[Authorization] tokenresolve(service(config))})})}} else {Message({message: res.message,type: error,duration: 5 * 1000})return Promise.reject(res)}},error {return Promise.reject(error)}
)export default service思路, 当后端返回无权限时将请求先保存下来return一个Promise,利用Promise去刷新token,当请求token成功,拿着心得token,拿着存的config去再次请求成功后reslove() 这时带来了一个问题就是当多次请求时,会多次refresh_token 设置一个状态值用于记录是否正在刷新token。 如果正在刷新token将其利用Promise将其封装为一个函数,内部自动调用resolve,存入一个数组等到刷新token后执行存入的函数,执行resolve(),然后依次来再次请求数据返回正确的数据。
// 我们先看一下定义fn1
function fn1 () {console.log(执行fn1)
}// 执行fn1,只需后面加个括号
fn1()// 回归到我们request数组中每一项其实存的就是一个类似fn1的一个函数
const fn2 (token) {config.headers[X-Token] tokenresolve(config)
}// 我们要执行fn2也只需在后面加个括号就可以了
fn2()// 由于requests是一个数组所以我们想遍历执行里面的所有的项所以用上了forEach
requests.forEach(fn {// 执行fnfn()
})
