置顶小程序登录态维护的分享精选热门

背景：

最近有新项目要启动，之前项目在登录的流程中需要用户授权手机号，不符合小程序运营规范，故决定此次进行梳理整改一下登录的相关流程。

分析：

根据官方的示例（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html），针对C端业务token的管理，输出该流程图，如下所示：

代码实现：

app.js

            // 登录
              login() {
                return new Promise((resolve, reject) => {
                  const userInfo = wx.getStorageSync('userinfo')
                  if (userInfo) {
                    resolve(userInfo)
                  } else {
                    wx.login({
                      success: (res) =>{
                        console.log(res)
                        // 获取业务token，及个人信息接口
                        setTimeout(() => {
                          const res = {
                            token: "iahsoiyiuaiu798=23492ib2hbjds823sdkajhgkas=",
                            userInfo: {
                              mobile: '18755131234',
                              nickName: 'xxx',
                              imgUrl: 'https:/xxxx'
                            }
                          }
                          wx.setStorageSync('userinfo', res)
                          resolve(res)
                        }, 0)
                      }
                    })
                  }
                })
            
            

xxx页面.js：
            
            const app = getApp()
            
            Page({
              data: {
                isBandMobile: false // 是否绑定手机号
              },
              onLoad() {
                // 登录
                app.login().then(res => {
                  console.log(res)
                  const { userInfo: { mobile } } = res
                  this.setData({
                    isBandMobile: Boolean(mobile)
                  })
                })
              },
              // 绑定手机号
              getPhoneNumber (e) {
                console.log(e.detail.code)
              },
              // 业务
              todo() {
                // todo
              },
            })
            
            
            

request.js: 
            
            let isRefreshing = true;
            let subscribers = [];
            
            
            function onAccessTokenFetched() {
              subscribers.forEach((callback) => {
                callback();
              })
              subscribers = [];
            }
            
            
            function addSubscriber(callback) {
              subscribers.push(callback)
            }
            
            
            export class Http {
              constructor() {}
            
            
              request({ url, data = {}, method, header, callback = ''} = {}) {
                let _this = this;
                return new Promise((resolve, reject) => {
                  wx.request({
                    url,
                    data,
                    method,
                    header: { Authorization: 'Bearer ' + wx.getStorageSync('userinfo').token },
                    callback,
                    fail(res) {
                      reject(res)
                    },
                    complete: res => {
                      if (callback) return callback(res.data);
                      let statusCode = res.statusCode;
                      if (statusCode == 404) {
                        console.log('接口不存在')
                      } else if (statusCode == 401) {
                        
                        // 将需要重新执行的接口缓存到一个队列中
                       addSubscriber(() => {
                         _this.request({ url, data, method, header, callback: resolve })
                       })
                        
                       if (isRefreshing) {
                          refreshToken(url, data).then(() => {
                            // 依次去执行缓存的接口
                            onAccessTokenFetched();
                            isRefreshing = true;
                          })
                        }
                        isRefreshing = false; 
                      } else if (statusCode == 200) {
                        resolve(res.data)
                      } else if (statusCode.startsWith('5')) {
                        wx.showModal({ content: '服务器报错，请重试！', showCancel: false });
                      } 
                    }
                  })
                })
              }
            }
            
            
            // 获取token
            const refreshToken = () => {
              return new Promise((resolve, reject) => {
                wx.login({
                  success: (res) =>{
                    console.log(res)
                    // 获取业务token，及个人信息接口
                    setTimeout(() => {
                      const res = {
                        token: "iahsoiyiuaiu798=23492ib2hbjds823sdkajhgkas=",
                        userInfo: {
                          mobile: '18755131234',
                          nickName: 'xxx',
                          imgUrl: 'https:/xxxx'
                        }
                      }
                      wx.setStorageSync('userinfo', res)
                      resolve(res)
                    }, 0)
                  }
                })
              })
            }
            
            
            

代码片段：https://developers.weixin.qq.com/s/d2uFwHm17mBg

总结：

此流程中主要将获取用户手机号，从登录流程中剥离出去，使得登录流程更加解耦，以用户openid作为唯一标识，将授权手机号后置，当具体某业务中需要用户手机号时，再去获取。根据自己的业务需要，在“个人中心”页面也可以提供修改绑定手机号的入口即可。关于头像和昵称的话，也在个人中心去获取即可。