《基于Taro框架的微信小程序JWT授权登录方案-教程》由会员分享,可在线阅读,更多相关《基于Taro框架的微信小程序JWT授权登录方案-教程(2页珍藏版)》请在金锄头文库上搜索。
1、小程序这两年可谓是风风火火,已经涉及到了行业的方方面面,作为一枚前端码农,为了紧跟时代的步伐,满足市场的需要,楼主也步入了小程序的坑中,一探究竟,从最初的原生开发,过渡到WePY的引入,又转到了mpvue的框架,最近又准备踩踩Taro的坑 了之所以从框架迁移到框架,一是由于该框架是京东凹凸实验室开发维护的,目前来看比较活跃,更新迭代速度比较快,质量上有一定的保障;二是该框架支持多端统一,一劳永逸,为后面拓展H5等其他业务奠定基础因业务需求,我们采用进行身份鉴权,所以才有了这篇授权登录 解(cai)决(keng)方(zhi)案(nan),如果对还不是很了解的小伙伴,请猛戳这里ok,不废话了,直接
2、进入你们最想看到代码环节正文关于的安装的使用,我这里就不再赘述了,具体的步骤可以参考官网给出的教程,我们直接来看看授权登录这一块: 本文相关的代码是跟楼主目前公司的有些业务场景有关,如有不同,请自行更改即可初始化项目时,我们需要选择使用模版,进行状态管理,然后默默等待依赖安装完成,通过命令就可以启动我们的小程序服务了接下来跟着我的步骤走下去step1首先,我们需要使用到定义一些相关的数据,方便我们后面的判断和使用三步走,、我这里就直接贴代码了目录目录目录最后不要忘记将其通过方法合并到里面去为了方便后面的使用,这里我在入口文件中将直接挂在到了对象上,这样我们也就可以在后面通过这种方式直接获取进行
3、操作处理,即:step2我们在创建一个文件夹,用来存放我们一些公用的方法之类的文件由于微信小程序的限制,我们无法得知用户的登录状态是否过期,所以我们必须要通过来接口检测当前用户登录态是否有效,做对应的逻辑处理因此,我们创建一个文件,用来微信登录,获取获取授权信息,其流程可以参考官方的这张时序图!我们的就是上面图所提到的自定义登录状态,它一般是长这样的其中是令牌过期时间,令牌签发时间,令牌生效时间,是用户状态,包含用户的身份信息,我们主要会用到和两个字段,用来判断令牌是否过期和发送请求携带用户身份因此,我的做法是,在用户进入小程序的时候通过,检查是否过期,如果过期需要通过重新登录进行授权,获取授
4、权信息,否则就判断用户的令牌是否过期,如果过期就要重新刷新令牌,重新获取,其代码如下上面总共定义不少方法,我都有注释,相信大家也都能看懂,其主要思想就是,如果用户首次进入小程序,通过进行登录,并将令牌存入本地,后面通过方法进行获取请求的令牌,以后用户在进入小程序的时候,就进行授权信息和登录状态检测,如果登录过期或者令牌过期则通过方法进行请求,获取最新的身份令牌!上面之所以要触发一次是因为用户每次进入需要进行一次检测,如果用户本次未过期,一般来说本次小程序生命周期内就就不需要在进行检测了,因此我们用一个状态来标识用户是否是重新进入小程序step3假定我们的页面的初始化请求都写在生命周期内,那么现
5、在我们要做的就是要在页面接口请求之前去判断是否已经获取到,如果有则进行正常的接口请求,否则就通过上面的登录获取,不然就会导致接口未携带令牌而发生错误那么问题来了,我们如何阻塞而保证每次接口请求之前都已经拿到了呢,这里我的做法就是对进行二次封装,采用的是提供的装饰器,关于装饰器的使用,可以瞄一眼这篇文章通过装饰器,我们可以将进行二次封装,可以根据业务情况将授权、分享等全部进行归一化处理,这里我们创建一个,来实现这个功能核心思想是,通过和阻塞,让其先执行自身的方法,拿到授权信息后,在调用父类的方法,这样就可以保证授权信息获取到再进行接口请求了我们要做的就是在页面内通过进行装饰即可这里我做了个测试,在清空全部授权信息后,在页面进行一次接口请求,可以看到先执行的是获取用户令牌,然后进行页面的接口请求,保证了执行顺序不会错乱小结ok,到此为止,我们基本上已经算是完成了整套体系,接下来就是在接口请求中加上就好了,这里我就补不贴代码了 完成的代码可去仓库自行查看对于我来说,也算是属于初探,这篇文章也是希望能给跟我一样萌新的小伙伴一个抛砖引玉的作用,如果有哪里写的不对的地方,还请批评斧正