uni-app 微信小程序刷新token,无感登录

这篇具有很好参考价值的文章主要介绍了uni-app 微信小程序刷新token,无感登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

描述:

        后端token每5分钟刷新一次,需要给注册过的用户无感登录,当接口403或401后,刷新token并且重新发起所有403或401请求

我的实现

uniapp登录token,uni-app,前端,微信小程序

 参照:

// 此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 - 掘金 (juejin.cn)文章来源地址https://www.toymoban.com/news/detail-616354.html

到了这里,关于uni-app 微信小程序刷新token,无感登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(93)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(41)
  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(42)
  • uni-app微信小程序使用echarts

    uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(43)
  • uni-app(微信小程序)获取当前位置uni.getLocation

    uni-app(微信小程序)获取当前位置uni.getLocation

     1、微信公众平台  开发  开发管理   2、开通之后到项目文件    3、下载腾讯地图插件并引入到文件中    

    2024年02月11日
    浏览(44)
  • uni-app微信小程序——下拉多选框

    uni-app微信小程序——下拉多选框

    插件来自:select-cy - DCloud 插件市场  

    2024年02月11日
    浏览(10)
  • uni-app做微信小程序的分包处理

    uni-app做微信小程序的分包处理

    我们的都知道微信小程序有随即随用,用完即走的优点,并且它开发门槛低,但是它也有一个致命的缺点,就是代码包体积的限制,这一缺点让小程序的开发有了一定的限制,现在有一方法可以减少代码包的体积,能够让小程序的功能得到一定的扩展,这一方法就是——分包

    2023年04月08日
    浏览(40)
  • uni-app嵌入微信小程序原生代码

    uni-app嵌入微信小程序原生代码

    使用uni-app有时需要用到微信小程序原生代码 解析: uni-app项目结构跟原生小程序的项目结构有着不一致的区别,如果说开发过程中必须要使用原生代码,就需要把原生代码作为组件的方式在uni-app项目中引入使用 官网为了应对这一个需求,就给出了以下方法,供开发者实现 wxcompone

    2024年02月05日
    浏览(43)
  • 微信小程序转uni-app注意事项

    微信小程序转uni-app注意事项

            如果你手头上有一套微信小程序的代码,怎样把它变成一个网页版或者app版本的呢?我推荐你使用uni-app。         使用uni-app可以很方便的将微信小程序代码翻译成uni-app项目,通过uni-app项目又可以编译成h5、app或微信小程序版本。这样一来,写一份代码同时可以

    2024年02月04日
    浏览(9)
  • [uni-app]设置运行到微信小程序

    [uni-app]设置运行到微信小程序

    1、设置微信小程序开发工具路径 2、检查微信小程序开发工具是否开启了服务端口 服务端口要是没有开启,会报 × initialize。 3、在uni-app开发工具中点击运行微信开发者工具,微信开发工具运行成功。

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包