小程序自定义的token实现无感刷新
哪位盆友帮我把这段代码改造成可以实现token无感刷新的
const errorToast = function(msg) {
wx.showToast({
title: msg || "服务器繁忙，请稍后再试",
icon: "none"
})
}
export default function $mHttp (params) {
wx.showLoading({
title: params.load_txt || '加载中...',
mask:params.mask || false
})
return new Promise((resolve, reject) => {
wx.request({
url: params.url,
data: params.data,
header: params.header || {
//"Content-Type": "application/x-www-form-urlencoded",
"token": wx.getStorageSync("token"),
"uid": (new Date()).getTime() + '_' + Math.floor(Math.random() * 100000000) //接口请求流水号
},
method: params.method ||'POST' ,
success: function (res) {
wx.hideLoading()
var data = res.data;
resolve(data)
},
fail: function (e) {
wx.showModal({
content: '出现错误:'+e.errMsg
})
errorToast();
reject(e)
}
})
})
}
参考GPT和自己的思路：关于小程序自定义token无感刷新的问题，可以考虑在发送请求之前检查token是否快过期，如果快过期则重新获取新的token，并将新token存储到缓存中替换旧的token。具体实现可以在请求之前添加拦截器，在拦截器中进行检查和更新。
以下是一个示例代码：
// 添加拦截器
wx.interceptors.request.use(config => {
// 判断token是否快过期，需要自行根据token过期时间来判断
if (tokenAlmostExpired()) {
// 发送请求获取新的token，并替换当前的token
return refreshToken().then(newToken => {
config.header.token = newToken;
return Promise.resolve(config);
});
} else {
return Promise.resolve(config);
}
});
export default function $mHttp(params) {
wx.showLoading({
title: params.load_txt || '加载中...',
mask: params.mask || false
});
return new Promise((resolve, reject) => {
wx.request({
url: params.url,
data: params.data,
header: {
"token": wx.getStorageSync("token"),
"uid": (new Date()).getTime() + '_' + Math.floor(Math.random() * 100000000) //接口请求流水号
},
method: params.method || 'POST',
success: function(res) {
wx.hideLoading();
var data = res.data;
resolve(data);
},
fail: function(e) {
wx.showModal({
content: '出现错误:' + e.errMsg
});
errorToast();
reject(e);
}
});
});
}
其中，tokenAlmostExpired和refreshToken需要根据具体情况实现，分别用于判断当前的token是否即将过期和获取新的token。
1）此时需要在个人中心页面携带token向后端接口发送请求
//用户信息接口
export const getUserInfo = (token)=>axios.get("/api/v1/pri/user/find_by_token",{
params:{//请求头携带token传参，来获取后端对应用户信息（头像，名字等）
"token":token
}
})
2）在个人信息页面展示信息，并且有退出登录按钮进行退出
<template>
<div>
<p>{{ info.name }}</p>
<button v-if="getToken !== ''" class="green" @click="signOut">
退出登录
</button>
</div>
</template>
<script>
import { getUserInfo } from "@/api/getData.js";
export default {
data() {
return {
info: {},
};
},
//computed会有缓存功能，强调于属性的获取
computed: {
//从vuex中获取token
getToken() {
return this.$store.state.token;
},
},
methods: {
//获取用户信息
async getInfo() {
try {
const result = await getUserInfo(this.getToken);
if (result.data.code === 0) {
this.info = result.data.data;
}
} catch (error) {
console.log(error);
}
},
//退出登录
async signOut() {
this.$createDialog({
type: "confirm",
title: "确认退出吗?",
confirmBtn: {
text: "确定按钮",
active: true,
disabled: false,
href: "javascript:;",
},
cancelBtn: {
text: "取消按钮",
active: false,
disabled: false,
href: "javascript:;",
},
onConfirm: () => {
this.$createToast({
type: "warn",
time: 1000,
txt: "退出成功",
}).show(
this.$store.dispatch("clearToken"),
//清除token
localStorage.removeItem("token"),
//刷新页面
location.reload()
);
},
}).show();
},
},
mounted() {
if (this.getToken) {
this.getInfo();
}
},
};
</script>
到这里登录保存token以及退出清除token就实现了，在其他需要token的组件中只需要继续获取到vuex的token就可以获取到用户的信息了