造轮子之uni-app框架封装刷新token函数

8 篇文章 0 订阅
3 篇文章 0 订阅

app登陆状态判断可能会是token检测的方式,所以用uni.setStorageSync的api将后端传来的token赋值在浏览器缓存里,电脑端查看方式:F12->Application->Local Storage
在这里插入图片描述新建一个文件,命名为xxx.js

// 公共的请求
import HttpRequest from './HttpRequest.js' //这是自己封装的ajax函数
 const request = function(options) {
     try {
		const token = uni.getStorageSync('token');//获取缓存里的token
		const refreshToken = uni.getStorageSync('refreshtoken');//获取缓存里的refreshtoken
		const time = uni.getStorageSync('time');//获取赋值token时的时间
		if(token){//有token,则判断token是否过期,如果无token,则直接去登陆。
			if (check(time)=='overdue') {//触发check()函数,判断token是否过期————过期,token重新刷新
				var SendData={
						access_token: token,
						refresh_token : refreshToken
					}//发送的函数
				HttpRequest.PostDataByUni(SendData, 'api/login/refresh', {})//可以使用uni.request(options)api
				.then((res) => {//如果请求成功,触发,res是请求后的返回的参数
					if (res.data.code == 200) {//每一个if都是根据后端返回值来判断的,这个时候已经可以作为ajax成功了。
						uni.setStorage({
							key: 'token',
							data: res.data.data.access_token
						})
						uni.setStorage({
							key: 'refreshtoken',
							data: res.data.data.refresh_token
						})
						if(res.header.Date){//这一级的if是后端老哥返回的Date可能是大写又可能是小写的。
							uni.setStorage({
								key: 'time',
								data: res.header.Date
							})
						}
						else if(res.header.date){
							uni.setStorage({
								key: 'time',
								data: res.header.date
							})
						}
						uni.reLaunch({
							url: '../main/main',
						});
						return ;
					} else if (res.data.code == 500) {//如果是500的话说明是后端的问题
						uni.showToast({
							icon:'none',
							title: res.data.msg,
							duration: 2000
						})
						uni.reLaunch({
							url: '/pages/login/login',
						});
						return ;
					}
				}).catch((res) => {
					console.log(res)
				});
				return ;
			}else{//判断token未过期,直接结束
				return ;
			}
        }else{//没token,直接去登陆
			uni.navigateTo({
				url: '/pages/login/login' 
			});
            return;
        }
     } catch (err) {
      console.log(err)
			console.log("request出错")
		return;
    }
	//解决toolbars不能转换的问题 这个必须加,不然会报错.
	if (options.url=="/pages/main/main"||options.url=="/pages/locate/locate"||options.url=="/pages/user/user")
		return uni.switchTab(options)
    return uni.redirectTo(options);
  }

function check(time) {//判断时间是否过期的函数。
	var time1 = new Date(time)
	var date2=new Date();
	console.log(time)
	return date2.getTime()-time1.getTime()-(1000*60*60)<0?'unoverdue':'overdue';
}
export default request;

使用方法:
在每个需要用到token刷新的页面,引用xxx.js。在周期函数onReady中加如下代码

		onReady:function(){
			request({
				url:"record",//url是本页面的名字,比如本页面如果叫record.vue
				method:'get',//固定为get
				success: function (res) { }//这个可忽略
			})
		},

参数url:如果这个封装函数用在toolbars的页面的话,就把url参数写成绝对路径。如果不是只写去掉后缀的文件名就可以。

uni-app中,可以通过以下步骤对接口进行封装: 1. 创建一个`utils/request.js`文件,引入`uni.request`方法,并导出`baseURL`和`request`方法。 ``` export const baseURL = '基地址' export const request = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseURL + options.url, //接口地址:前缀+方法中传入的地址 method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET” data: options.data || {}, //传递参数:传入的参数或者默认传递空集合 header: { 'token': uni.getStorageSync("token") || "" //自定义请求头信息 }, success: (res) => { console.log(res, uni.getStorageSync('token')); //返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败) if (res.data.code == 1) { resolve(res.data.data) } else { if (res.data.code == 401) { uni.navigateTo({ url:'/login/login' }) uni.clearStorageSync() } reject(res.data.msg) } // 如果不满足上述判断就输出数据 }, // 这里的接口请求,如果出现问题就输出接口请求失败 fail: (err) => { console.log(err) reject(err) } }) }) } ``` 2. 在需要使用接口的地方,引入`request`方法,并进行封装。 ``` // 在uniapp中调用接口的时候,如果需要在一进页面就请求数据就放到生命周期钩子里面 onLoad() { this.$rqt.loginIn().then(res=>{ console.log(res) }) } // 如果有参数的话,可以写在loginIn方法的参数里面 // 如果需要自己请求参数,可以写到方法里面 ``` 3. 创建一个`api/index.js`文件,引入`request`方法,并编写具体的接口请求方法。 ``` import { request } from '@/utils/request.js' // 获取论坛类型 /api/forum/ftype/index export const getForumType = (page, rows) => request({ url: 'forum/ftype/index', method: 'post', data: { page, rows } }) ``` 通过以上步骤,你可以在uni-app中对接口进行封装,方便统一管理和调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp 接口封装](https://blog.csdn.net/m0_46846526/article/details/126362687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp封装接口](https://blog.csdn.net/zhuxiaolong1234/article/details/127816166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AtalantaDavis

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值