微信小程序授权登录需要按钮触发的解决方案

近期，微信官方修改了 getUserInfo、authorize等 接口，无法直接弹出授权窗口，这让我们以前一开始就获取用户信息完成登录的功能全部失效，新规定是第一次获取用户信息只能通过 button 去触发，那么有什么解决方案呢？

我的思路是一进入小程序的时候，立马去调用登录接口（wx.login，之前的代码不用变）并在回调中去调用获取用户信息接口（wx.getUserInfo），这时候就需要特别注意了，需要会wx.getUserInfo的获取失败钩子进行判断，如果失败，那么直接跳转去登录页面（登录页面中可以实现按钮登录）；如果成功，继续后续逻辑代码。

具体代码如下（app.js）：

const Request = require("/utils/request"); //引入封装的http拦截器

App({

onLaunch: function(options) {

this.authorize(options.query); // 直接授权登录（[options.query 参数与分享配置有关，后续文章介绍](https://#)）

},

authorize: function(share) {

let self = this;

share = share || {};

wx.login({

  success: function(res) {

    wx.getUserInfo({

      success: function(resp) {

        Request.post("/api/xcxWxLogin", {

          code: res.code,

          encryptedData: resp.encryptedData,

          iv: resp.iv

        }).then(({

          data: response

        }) => {

          if (response.code !== 0) {

            wx.showToast({

              title: response.msg,

              icon: "none"

            });

          } else {

            //  保存sessionid ，每次请求都会在拦截器中自动添加到header中

            wx.setStorageSync("UserSessionId", response.data.sessionId);

            self.globalData.sessionid = response.data.sessionId;

            //todo 后续逻辑代码

          }

        });

      },

      fail: function(err) {

        //重点，如果获取失败直接跳转

        let timer = setInterval(() => {

          let pages = getCurrentPages();

          if (pages.length > 0) {

            clearInterval(timer);

            let currentPage = pages[pages.length - 1];

            if (currentPage.route === "pages/user/userbind/userbind") {

              return true;

            }

            try {

              wx.setStorageSync("SYS_PREVIOUSPAGE", currentPage);

              setTimeout(() => {

                wx.redirectTo({

                  url: "/pages/login/login"

                });

              }, 300);

            } catch (e) {

              wx.redirectTo({

                url: "/pages/login/login"

              });

            }

          }

        }, 200);

      }

    });

  }

});

}

})

获取用户信息成功的回调具体得看业务，获取失败的回调主要是加定时器去判断页面是否加载完成，加载完成后再保存当前页面路径（用于登录成功后跳转），最后跳转到一个带有登录按钮的页面（不在app.js中完成登录，而是在login.js中完成登录，第二次打开就静默授权了）

image

下面介绍登录页面的逻辑代码（login.js）：

const Request = require("../../utils/request");

Page({

/**

• 页面的初始数据

*/

data: {

route: "/pages/home/home"

},

/**

• 生命周期函数--监听页面加载

*/

onLoad: function(options) {

let self = this;

wx.getStorage({

  key: "SYS_PREVIOUSPAGE",

  success: function(res) {

    if (res.errMsg === "getStorage:ok") {

      self.setData({

        route: "/" + res.data.route,

        share: res.data.options

      });

    }

    wx.removeStorage({

      key: "SYS_PREVIOUSPAGE"

    });

  }

});

},

bindgetuserinfo: function(e) {

if (e.detail.errMsg.indexOf("fail") > -1) {

  wx.showModal({

    title: '温馨提示',

    content: '您未同意授权，系统无法检测您的身份，请允许授权',

  });

} else {

  getApp().authorize(this.data.share);

  setTimeout(() => {

    if (["/pages/home/home", "/pages/course/courselist/courselist", "/pages/course/publiclist/publiclist", "/pages/consult/consultlist/consultlist", "/pages/usercenter/usercenter"].indexOf(this.data.route) > -1) {

      wx.switchTab({

        url: this.data.route

      });

    } else {

      wx.redirectTo({

        url: this.data.route

      });

    }

  }, 800);

}

}

})

login思路：一进入该页面，从缓存中把上一个页面拿出来（读取后需要清除该缓存），然后把登录按钮设置成获取用户信息类型，如

image

点击登录按钮后触发bindgetuserinfo回调，在回调中判断是否授权，没有点击确定授权就提示要授权，有授权就直接调用app.js（也叫底层代码）的授权方法（用来保存用户信息），最后重定向到上一个页面（是重定向不是返回，而且需要注意是不是导航页面）

image

到这里，需要点击按钮才能触发登录已解决。

PS：需要考虑的问题是，在其他页面，怎么才能知道是否已经完成登录了呢？