uniapp使用uview(luch-request)，无痛刷新token

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {// 初始化请求配置uni.$u.http.setConfig((config) => {/* config 为默认全局配置*/config.baseURL = '/'; /* 根域名 */config.header = {}return config})// 请求队列let requestList = []// 是否正在刷新中let isRefreshToken = false// 请求拦截uni.$u.http.interceptors.request.use(async (config) => { // 可使用async await 做异步操作if (['DELETE'].includes(config.method)) {config.header = {...config.header,'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'}}config.header["Authorization"] = `Bearer ${uni.getStorageSync("accessToken")}`;return config}, config => { // 可使用async await 做异步操作return Promise.reject(config)})// 响应拦截uni.$u.http.interceptors.response.use(async (response) => {if (response.data.msg === '刷新令牌已过期' || response.data.msg === '无效的刷新令牌') {return handleAuthorized(response.data)}if (response.data.code === 401) {// 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了if (!isRefreshToken) {isRefreshToken = true;let refreshToken = uni.getStorageSync("refreshToken")// console.log(refreshToken)// 1. 如果获取不到刷新令牌，则只能执行登出操作if (!refreshToken) {return handleAuthorized(response.data)}// 2. 进行刷新访问令牌try {const refreshTokenRes = await uni.$u.http.post("/member/auth/refresh-token?refreshToken=" +uni.getStorageSync("refreshToken"))if (refreshTokenRes.code === 401) {return handleAuthorized(response.data)}// 2.1 刷新成功，则回放队列的请求 + 当前请求uni.setStorageSync("refreshToken", refreshTokenRes.data.refreshToken)uni.setStorageSync("accessToken", refreshTokenRes.data.accessToken)requestList.forEach(cb => cb())return new Promise(resolve => {resolve(uni.$u.http.request(response.config))})} catch (e) { // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。// 2.2 刷新失败，只回放队列的请求requestList.forEach(cb => cb())// 提示是否要登出。即不回放当前请求！不然会形成递归return handleAuthorized(response.data)} finally {requestList = []isRefreshToken = false}} else {// 添加到队列，等待刷新获取到新的令牌return new Promise(resolve => {requestList.push(() => {resolve(uni.$u.http.request(response.config))})})}}uni.hideLoading()return response.data}, (response) => {console.error("网络异常")return Promise.reject(response)})function handleAuthorized(data) {uni.$u.toast('验证失败，请重新登录');// 函数节流uni.$u.throttle(() => {uni.reLaunch({url: '/pages/login/login'});}, 1000 * 10)return data}}

uniapp使用uview(luch-request)，无痛刷新token相关推荐

uniapp全局请求插件luch-request 无痛刷新token
场景:单独请求遇到后台接口请求返回401或者400时,需要重新刷新token再重新请求原本的接口,又不能迫使用户刷新页面. let http = new Request({baseURL: url, ...
axios 登录后设置header_axios如何利用promise无痛刷新token
需求最近遇到个需求:前端登录后,后端返回token和token有效时间,当token过期时要求用旧token去获取新的token,前端需要做到无痛刷新token,即请求刷新token时要做到用户无感 ...
Laravel使用Dingo API+JWT实现认证机制无痛刷新Token
Laravel使用Dingo API+JWT实现认证机制无痛刷新Token 一.安装[Dingo API](https://github.com/dingo/api) 和 [JWT](https:/ ...
无痛刷新token续接401请求
在小程序开发中,我们都知道小程序是没有cookie的,那么用户身份是如何确定的,后段颁发token,前端每次请求头部附带token. 既然是token,那么肯定有它的过期时间,没有一个token是永久 ...
使用 Jwt-Auth 实现 API 用户认证以及无痛刷新访问令牌
最近在做一个公司的项目,前端使用 Vue.js,后端使用 Laravel 构建 Api 服务,用户认证的包本来是想用 Laravel Passport 的,但是感觉有点麻烦,于是使用了 jwt-aut ...
Laravel 5.5 使用 Jwt-Auth 实现 API 用户认证以及无痛刷新访问令牌
最近在做一个公司的项目,前端使用 Vue.js,后端使用 Laravel 构建 Api 服务,用户认证的包本来是想用 Laravel Passport 的,但是感觉有点麻烦,于是使用了 jwt-aut ...
前端token知识梳理：token如何存储？token过期如何处理？如何无感刷新token？
在前后端是以token的形式交互,既然是token,那么肯定有它的过期时间(为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是1-7天的样子),没有一个token是永久的,永久的t ...
uniapp 实现无感刷新token, 适应大多数项目
不管你是用taro uni 还是vue-cli 或者 react-cli 刷新token这块一通百通本质上都一样我之前讲了一个是在响应拦截哪里做token刷新其实这样做还是不好的,因为这样我 ...
Laravel6通过jwt(tymon/jwt-auth)实现API用户无感刷新TOKEN
Laravel6通过jwt实现API用户无感刷新TOKEN 1.TOKEN是什么 2.jwt是什么 3.jwt安装&配置 3.1.通过composer安装 3.2.发布配置 3.3.生成加密密 ...

uniapp使用uview(luch-request)，无痛刷新token

uniapp使用uview(luch-request)，无痛刷新token相关推荐

最新文章

热门文章