带上对上面答案的认知，我们开始说小程序页面 Page 方面的逻辑。分以下几点：由于在 App.onLaunch() 中，用户登录态信息是异步的方式请求后台接口的，接口返回登录态信息并赋值给全局变量 app.gData 前，很大可能小程序页面已经执行完了 onLoad() 方法，这样直接对我们页面里后面的写逻辑造成了致命的错误(页面中获取到的登录态信息是错误的)。
还有就是用户授权方面的问题。对于那些业务逻辑要求必须有用户基本信息的页面，我们得在页面初始化时验证用户授权状态(在登录的时候我们为这一步做过准备)，若未曾询问过或者用户拒绝授权，我们同意跳转到 /pages/auth/auth 页面进行用户授权步骤，同意后返回上一页并做相应的更新。
我们很容易会想到，上面的这两点都是多页面中调用到的，必然会考虑到灵活封装好，之后每个页面调用即可。
在 app.js 中先预定义全局控制字段，包括登录控制字段 logined， 授权列表 authsetting，以及用户信息(包含token,就是登录态信息)：1// app.js
2
3'gData': {
4 'logined': false, //用户是否登录
5 'authsetting': null, //用户授权结果
6 'userinfo': null, //用户信息(包含自定义登录态token)
7},
针对上面的第一点，我们在 app.js 下封装 pageGetLoginInfo() 方法，该方法主要做的事情有一下几点：判断登录控制字段 app.gData.logined，若已经登录——控制字段值为 true，直接把全局控制字段赋值给页面的控制字段；
若全局登录状态控制字段值为 false，则我们完全可认为是由于异步请求后台的原因导致的全局登录控制字段未赋值(因为上文提到登录失败都可以认为是系统的一个Bug)。所以若为 false， 则在 app 对象中定义一个新函数 loginedCb()，供 app.onLaunch() 中异步获取到登录态信息后回调(在本文第四点有特意提过)。而 loginedCb() 方法要做的也是把全局控制字段赋值给页面的控制字段；
代码中出现的 wxsetData() 方法是在 /utils/wxapi.js 定义的，这里我们导入进来1// app.js
2
3import {
4 wxsetData
5} from './utils/wxapi.js';
6
7/**
8* 获取小程序注册时返回的自定义登录态信息(小程序页面中调用)
9* 主要是解决pageObj.onLoad 之后app.onLaunch()才返回数据的问题
10*/
11pageGetLoginInfo: function(pageObj){
12 var _this = this;
13 return new Promise((resolve, reject) => {
14 // console.log(_this.gData.logined);
15 if (_this.gData.logined == true) {
16 wxsetData(pageObj, {
17 'logined': _this.gData.logined,
18 'authsetting': _this.gData.authsetting,
19 'userinfo': _this.gData.userinfo
20 }).then(function(data){
21 //执行pageObj.onShow的回调方法
22 (pageObj.authorizedCb && typeof(pageObj.authorizedCb) === 'function') && pageObj.authorizedCb(data);
23 resolve(data);
24 }); } else {
25 /**
26 * 小程序注册时，登录并发起网络请求，请求可能会在 pageObj.onLoad 之后才返回数据
27 * 这里加入loginedCb回调函数来预防，回调方法会在接收到请求后台返回的数据后执行，详看app.onLaunch()
28 */
29 _this.loginedCb = () => {
30 wxsetData(pageObj, {
31 'logined': _this.gData.logined,
32 'authsetting': _this.gData.authsetting,
33 'userinfo': _this.gData.userinfo
34 }).then(function(data){
35 //执行pageObj.onShow的回调方法
36 (pageObj.authorizedCb && typeof(pageObj.authorizedCb) === 'function') && pageObj.authorizedCb(data);
37 resolve(data);
38 });
39 }
40 }
41});
42},
然后我们再封装一个 pageOnLoadInit() 方法，也简单说说方法的逻辑：调用上一步 pageGetLoginInfo() 方法，保证页面拿到有效准确的登录态信息；
验证登录，同时通过参数来决定当前页面初始化时是否需要校验用户授权；
若用户没有授权，则从当前页面跳转到 /pages/auth/auth 页面，auth 页面就是一个授权按钮，用户点击后弹窗提示用户确认授权(小程序官方已修改只能通过点击按钮弹窗用户授权)；
涉及到授权方面的我们放在后面讨论：1// app.js
2
3/**
4* 封装小程序页面的公共方法
5* 在小程序页面onLoad里调用
6* @param {Object} pageObj 小程序页面对象Page
7* @param {Boolean} needAuth 是否检验用户授权(scope.userInfo)
8* @return {Object} 返回Promise对象，resolve方法执行验证登录成功后且不检验授权(特指scope.userInfo)的回调函数，reject方法是验证登录失败后的回调
9*/
10pageOnLoadInit: function(pageObj, needAuth = false){
11 var _this = this;
12 return new Promise((resolve, reject) => {
13 _this.pageGetLoginInfo(pageObj).then(function(res){
14 // console.log(_this.gData.logined);
15 if (res.logined === true) {
16 //登录成功、无需授权
17 resolve(res); if (needAuth) {
18 if (res.authsetting['scope.userInfo'] === false || typeof res.authsetting['scope.userInfo'] === 'undefined') {
19 common.navigateTo('/pages/auth/auth');
20 }
21 }
22
23 } else {
24 reject({
25 'errMsg': 'Fail to login.Please feedback to manager.'
26 });
27 }
28 });
29});
30},
现在问题基本解决了，剩下的就是在每个小程序页面中调用，只校验登录的逻辑在 Page.onLoad() 里面执行，下面以代码写在小程序页面 /pages/mine/index/index.js 中为例：1// /pages/mine/index/index.js
2
3const app = getApp();
4
5/**
6* 生命周期函数--监听页面加载
7*/
8onLoad: function(options){
9 var _this = this;app.pageOnLoadInit(this).then(function(res){
10 //这里写验证登录成功后且无需验证授权 需要执行的逻辑
11 //若还需验证授权成功才执行的逻辑需写在onShow方法里面，并且这里pageOnLoadInit()第二个参数要为 true
12
13}, function(error){
14 //登录失败
15 wx.showModal({
16 title: 'Error',
17 content: error.errMsg ? error.errMsg : 'Fail to login.Please feedback to manager.',
18 })
19 return false;
20});
21},
到此，针对第一点——页面登录已经完成。
针对第二点用户授权的。先看看在 app.js 中封装的 exeAuth() 方法，该方法就是统一授权与后台接口的交互1 /**
2 * [exeAuth 执行用户授权流程]
3 * @param {[string]} loginKey 自定义登录态信息缓存的key
4 * @param {[Object]} data wx.getUserInfo接口返回的数据结构一致
5 * @return {[Promise]} 返回一个Promise对象
6 */
7 exeAuth: function(loginKey, data) {
8 var _this = this;return new Promise((resolve, reject) => {
9 wxapi('request', {
10 'method': 'POST',
11 'url': _this.gData.api.request + '/api/User/thirdauth',
12 'header': {
13 'Content-type': 'application/x-www-form-urlencoded',
14 },
15 'data': {
16 'platform': 'miniwechat',
17 'token': _this.gData.userinfo.token,
18 'encryptedData': data.encryptedData,
19 'iv': data.iv,
20 }
21 }).then(function(res) {
22 //当服务器内部错误500(或者其它目前我未知的情况)时，wx.request还是会执行success回调，所以这里还增加一层服务器返回的状态码的判断
23 if (res.statusCode === 200 && res.data.code === 1) {
24 //更新app.gData中的数据
25 _this.gData.authsetting['scope.userInfo'] = true;
26 _this.gData.userinfo = res.data.data.userinfo;
27
28 //更新自定义登录态的缓存数据，防止再次进入小程序时读取到旧的缓存数据，这里让它异步执行即可，
29 //倘若异步执行的结果失败，直接清除自定义登录态缓存，再次进入小程序时系统会自动重新登录生成新的
30 wxapi('setStorage', {
31 'key': loginKey,
32 'data': res.data.data.userinfo
33 }).catch(function(error) {
34 console.warn(error.errMsg);
35 wxapi('removeStorage', {
36 'key': loginKey
37 });
38 });
39
40 resolve(res.data.data.userinfo);
41 } else {
42 return Promise.reject({
43 'errMsg': res.data.msg ? 'ServerApi error:' + res.data.msg : 'Fail to network request!'
44 });
45 }
46 }).catch(function(error) {
47 reject(error);
48 });
49});
50 },
要调用上述授权方法的地方必不可少的就是 /pages/auth/auth 统一授权页面了，对于其它可能用到的地方我们之后也可直接调用，我们来看看 /pages/auth/auth 的 bindGetUserinfo() type = getUserInfo 按钮的回调函数：1/**
2* getUserinfo回调函数
3*/
4bindGetUserinfo: function(e){
5 var data = e.detail;
6 if (data.errMsg === "getUserInfo:ok") {
7 app.exeAuth('loginInfo', data).then(function(res){
8 var pages = getCurrentPages();
9 var prevPage = pages[pages.length - 2]; //上一个页面prevPage.setData({
10 'userinfo': res,
11 'authsetting.scope\\.userInfo': true 这里请注意反斜杠转义，'scope.userInfo'被看做一个完整的键名
12 }, function(){
13 wx.navigateBack({
14 delta: 1
15 });
16 });
17
18 }).catch(function(error){
19 console.error(error);
20 wx.showModal({
21 title: 'Error',
22 content: error.errMsg,
23 })
24 });
25} else {
26 wx.showModal({
27 title: 'Warning',
28 content: 'Please permit to authorize.',
29 showCancel: false
30 })
31 return false;
32}
33},
最后像上面登录一样，在 app.js 里封装一个 pageOnShowInit() 供需要授权的页面调用：1/**
2* 封装小程序页面的公共方法
3* 在小程序页面onShow里调用
4* @param {Object} pageObj 小程序页面对象Page
5* @return {Object} 返回Promise对象，resolve方法执行验证授权(特指scope.userInfo)成功后的回调函数，reject方法是验证授权失败后的回调
6*/
7pageOnShowInit: function(pageObj){
8 var _this = this;
9 return new Promise((resolve, reject) => {
10 /**
11 * 这里通过pageObj.data.authsetting == (null || undefined)
12 * 来区分pageObj.onLoad方法中是否已经执行完成设置页面授权列表(pageObj.data.authsetting)的方法，
13 *
14 * 因为如果已经执行完成设置页面授权列表(pageObj.data.authsetting)的方法，并且获取到的授权列表为空的话，会把pageObj.data.authsetting赋值为
15 * 空对象 pageObj.data.authsetting = {} ，所以pageObj.data.authsetting倘若要初始化时，请务必初始化为 null ，不能初始化为 {}，切记！
16 */
17 if (pageObj.data.authsetting === null || typeof pageObj.data.authsetting === 'undefined') {
18 /**
19 * pageObj.onLoad是异步获取用户授权信息的，很大可能会在 pageObj.onShow 之后才返回数据
20 * 这里加入authorizedCb回调函数预防，回调方法会在pageObj.onLoad拿到用户授权状态列表后调用，详看app.pageOnLoadInit()
21 */
22 pageObj.authorizedCb = (res) => {
23 if (res.authsetting['scope.userInfo'] === true) {
24 //授权成功执行resolve
25 resolve();
26 } else {
27 reject();
28 }
29 }
30 } else {
31 if (res.authsetting['scope.userInfo'] === true) {
32 //授权成功执行resolve
33 resolve();
34 } else {
35 reject();
36 }
37 }
38 });
39},
由于授权多数情况下是从授权页面跳转回来的，所以这个方法设计在小程序页面的 Page.onShow() 中调用，具体调用这里不贴代码了，类似校验登录一样。
3922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
