关于uni-app的开发文档除了Dcloud之外分享的人很少,不知道是不是因为做博客不挣什么钱,所以都不写了?呵呵~~作为一个前端小白为了实现用户登陆保持,摸索了uni-app的全局变量和函数。在此做个笔记,希望对初次接触uni-app的小伙伴们有个帮助。
为什么要探索这个?
VUE技术群里曾不止一人提出用户登陆保持要靠后端,可是现在开发过程中通常做法是前后端分离,因此后端表示不背这个锅,那么我们如何保持用户的登陆状态?这里波波 分享下自己的做法。
1、后端给两个接口:登陆接口和刷新Token接口。
登陆接口不必说就是用户通过账户密码进行登陆时返回用户登陆信息的接口,而刷新Token则是客户端用户在登陆状态即将失效的时候,由客户端发起刷新Token请求,服务器被动响应请求的方式,保持用户的登陆状态一直有效。
当然了我们不排除有人通过socket等通信手段,但是这种做法在实际应用中可以大大的节约服务器的开销,减少不必要的请求和连接。
2、前端定时器。
定时器放在前端对用户来讲可以是无任何障碍的。用户自登陆接口请求之后需要在本地保存一个登陆的时间戳,APP启动时检测当前token对应的时间戳与当前时间的差值是否到了token失效的时间,比如我们通常设置token有效期为2个小时。我们可以每10分钟判断下时间,在token即将过期之前通过Token刷新接口获得新的token。一般情况下什么都不需要去做,更不需要10分钟请求一次token接口。
关于VUE或uni-app的全局变量和全局函数。
我们知道应用和页面都是有生命周期的。而全局变量顾名思义则是全局可以使用的变量,不需要我们频繁的通过请求接口获取,只需要在相关数据发生变化时进行更新即可。当然凡事有利必有弊。这种方式不好的地方就在于本地数据容易被 篡改和获取,容易发生信息泄露,但是对于单个APP客户端来讲这种影响是很小的。
我们若要定义全局的变量可以通过在APP.vue或main.js中写入:
- Vue.prototype.timerr = null;
全局变量很好定义,这里不多罗嗦。全局函数有两种写法:
一、写在APP.vue时应该在onLaunch下方写method扩展。示例如下:
- //扩展函数
- methods:{
- setTimer(){
- //定时器10分钟执行一次
- if( this.timerr === null ){
- this.timerr = setInterval(()=>{
- this.freshToken();
- },10*60*1000);
- }
- },
- }
二、写在main.js时可直接添加。示例如下:
- Vue.prototype.setTimer = function(){
- if( this.timerr === null ){
- this.timerr = setInterval(()=>{
- this.freshToken();
- },10*60*1000);
- }
- }
上面的代码示例是一个简单的定时器,因此如果想要这个定时器在APP打开期间一直运行,那么只需要在onShow事件中添加“this.setTimer”即可。
一个项目中我们通常会写很多定时器,波波需要提醒的是注意相关事件的销毁。通过这种流程做出来的APP会很轻量,速度绝对嗖嗖的。
波波本人也承接小程序和APP的项目开发,欢迎需要开发小程序或APP的朋友们通过网页上的联系方式联系我,谢绝私聊,请教问题的那种哈。
最后我们可以看到刚刚写的定时器已经在APP打开的整个生命周期中执行了,不管用户如何切换界面都不影响。