微信小程序授权登录方案及其在Taro下与Decorator的实现

之所以选择Taro作为技术框架：最近公司需要开发一个新的小程序，主要是做与支付知识相关的产品，涉及虚拟商品支付。至于IOS对虚拟商品支付的限制，再加上类似小程序的相关研究，决定IOS的支付方式要绕过h5公司总号支付的限制，所以在框架选择上需要一套代码加上一点兼容代码，就可以生成小程序库和H5版本。考虑到技术栈主要是反应，最后，

关于芋头及其提供能力的简介，可以浏览芋头。

需求场景

在微信小程序中，当你需要做上电、群殴等逻辑时，有一些接口需要认证等。在用户授权登录后，您应该将用户的接入令牌带到请求的头部，因此确保这些接口在用户登录之前不会启动请求。

之所以授权用户登录而不是小程序的静态登录方式，是因为当用户兼容H5时，登录过程是通过微信官方账号登录，当用户的union_id作为唯一依据时，以wx.login形式的用户代码登录只能得到open_id，不符合我们的要求。

UnionID机制描述小程序

我们在这里与后端的约定是，用户授权wx.getUserInfo用于获取用户信息并将其发送到后端进行注册或登录。后端返回一个访问令牌作为用户的凭证。在调用其他接口时，后端可以将这个accessToken带到头部，这样后端就可以在需要的时候根据accessToken获取当前的用户信息。

小程序的登录流程如下

由于applet的生命周期机制，生命周期是异步执行的，在生命周期之间不会阻塞执行。如果用户登录的逻辑是在onLaunch的时候进行的，那么在网络较弱的情况下，就会出现用户在获取accessToken之前就启动页面中的请求接口，导致接口报错的情况。

解决思路

通过使用React HOC和async/await的高阶组件Decorator来劫持当前页面调用接口的声明周期，并在当前声明周期执行其他调用之前等待封装的用户登录逻辑被执行。

举个例子

共享权力场景下，新用户点击共享用户的卡片进入小程序，需要弹出授权弹出框等。才能调用电源接口。

需要注意的是，劫持是当前声明周期的方法，不会阻塞其他生命周期。比如劫持willMount时，didShow和didMount的循环仍然会按顺序执行，不会等到willMount结束。

代码分享

主要分享装饰机的用途和功能。登录逻辑主要参考流程图，代码暂时不共享。

写一个能劫持传入组件生命周期的修饰器

由于Taro暂时不支持无状态组件，只能利用HOC的反向劫持能力来继承传入组件。此时，您可以等待登录逻辑完成，然后再执行劫持生命周期。

withLogin.js

const LIFE _ CYCLE _ MAP=[' will mount '，' didMount '，' did show ']；/** * * 登录鉴权* * @ param { string }[生命周期]需要等待的鉴权完再执行的生命周期威尔蒙特迪蒙特迪秀* @返回包装后的组件* */函数带登录(生命周期='willMount') { //异常规避提醒if(LIFE _ CYCLE _ map。(生命周期)0的索引){控制台。警告(` 0传入的生命周期不存在，鉴权判断异常============$ _ {生命周期} `)；返回组件=组件；}带有逻辑组件(组件)的返回函数{ //避免H5兼容异常if(工具。ish5()){ return Component；} //这里还可以通过回家的来获取本地用户信息，在用户一次登录之后，其他需要鉴权的页面可以用判断跳过流程//@ connect(({ user })=({//user info : user。userinfo，//}))类带登录扩展了组件{构造器(道具){ super(道具)；}异步组件将挂载(){ if(super。组件将挂载){ if(LIFE LIFE===LIFE _ CYCLE _ MAP[0]){ const RES=等待此消息$ _ autolog in()；if(！res)返回；}超级。componentWillmount()；} } async ComponentDidMount(){ if(super。componentDidMount){ if(LIFE LIFE===LIFE _ CYCLE _ MAP[1]){ const RES=等待此消息$ _ autolog in()；if(！res)返回；}超级。component did mount()；} } async ComponentDidShow(){ if(super。组件显示){ if(LIFE LIFE===LIFE _ CYCLE _ MAP[2]){ const RES=等待此消息$ _ autolog in()；if(！res)返回；}超级。componentdisshow()；} } } $_autoLogin=()={ //.这里是登录逻辑} } }导出默认值带登录复制代码

注意

使用的组件内必须有对应定义的生命周期，而且不能使用箭头函数式，例如componentWillMount(){}不能写成componentWillMount=()={}，会劫持失败