uniapp无痛刷新token
用户登录拿到token,但由于token是有时限的,刷新token的时候需要无声无息,用户还能继续之前的请求。
这里我的想法是,当token到期,返回状态码401,就发起刷新token接口,拿到新的token就把之前的请求再发送一遍,暂时解决问题
此法适用uniapp噢,之前看到其他人的教程,然后按照他的做法,自己亲测之后并记录
- 首先,引入封装的request插件:https://ext.dcloud.net.cn/plugin?id=159
- 按照插件配置服务器网址。
- 在index.js中设置请求拦截程序
import http from './interface'
import store from "@/store/index.js"
/**
* 将业务所有接口统一起来便于维护
* 如果项目很大可以将 url 独立成文件,接口分成不同的模块
*/
module.exports={
api: {
userDetail:'/user', //用户详情
//...
},
request:(url,data,method) => {
http.config.baseUrl = ""
//设置请求前拦截器
http.interceptor.request = (config) => {
let token =uni.getStorageSync("token")
delete config.header['Authorization']
if(token){
config.header['Authorization']='Bearer ' +token
}
}
//设置请求结束后拦截器
http.interceptor.response =async (response) => {
const statusCode=response.statusCode
if(statusCode ===401){ //返回401,即token需刷新
return response.data=await doRequest(response,url)
}
if (statusCode === 422){
uni.hideLoading()
//业务代码...return
} // 不能再刷新时,服务器返回状态码500时,判断是不是刷新token的接口
if(response.statusCode ===500 ){
if(response.config.url.indexOf("current") == -1){
uni.showToast({
icon:"none",
title:"网络错误"
})
}
return
}
if(response.statusCode===200 || response.statusCode===201|| response.statusCode===204){ //成功
uni.hideLoading()
return response.data
}else {
uni.hideLoading()
uni.showToast({
title:response.data.message ,
icon:'none',
duration: 1000
})
return
}
}
return http.request({
url:url,
data,
method:method
})
},
} //刷新token并继续之前请求
async function doRequest(response,url){
const res=await module.exports.request('/authorizations/current',{},'PUT')
if(res && res.access_token){
let config=response.config
uni.setStorageSync("token", res.access_token);
config.header['Authorization']='Bearer '+res.access_token
const resold=await module.exports.request(url,{...config.data},config.method)
uni.hideLoading()
return resold
}
else{ //这个时候状态码是 500
console.log("重新登陆");
uni.removeStorageSync("token")
store.commit("login",undefined)
uni.removeStorageSync("password")
uni.showToast({
title:"身份信息过期,请重新登陆",
duration: 1000,
success() {
uni.reLaunch({
url:'/pages/login/login'
})
}
})
return false
}
}
// 统一的响应日志记录 interface.js中,将401开放出来,500开放
_reslog(response)
if (statusCode === 200 || statusCode === 401 || statusCode === 201 || statusCode === 204|| statusCode === 500 ) { //成功 resolve(response); } else { reject(response) }
赞 (0)
