【开源项目笔记:platform-wechat-mall】小程序内用户帐号登录规范调整和优化

本文目标是把小程序的用户账号登录方式改成符合下面文章中服务范围开放的小程序的要求，小程序用户账号登录规范见：小程序内用户帐号登录规范调整和优化建议

根据这个新的登录规范，小程序不可以直接弹出用户授权页面，必须由用户主动操作来登录才行，而且在用户登录界面还要提供“暂不登录”的选项。

原来的用户登录流程:

1、当用户通过 我的->点击登录来登录时，直接弹出微信登录界面。没有“暂不登录”选项。
2、当小程序访问到需要用户信息才能正常访问的页面时，后台检查到用户没有登录会返回401错误（用户没有访问权限/需要进行身份验证），小程序收到该错误后会直接弹出授权登录页面btnAuth。

修改方案：

1、当用户通过 我的->点击登录 来登录时，首先弹出一个自定义提示框，提示用户“登录后可以继续操作”，并提供“立即登录”和“暂不登录”两个选项。当用户选择“立即登录”后，才弹出授权页面。

2、小程序收到401错误后，从“弹出授权登录页面btnAuth”修改为“记录用户没有登录”；同时，还要清空本地的用户信息，以免前后端用户信息不一致。由于小程序有可能在与后台的第一次交互中就需要用户权限，因此这里不做任何弹出提示，以免影响用户感受。

3、小程序中所有需要用户授权才能显示正确内容的页面，在发送访问请求前先本地检查用户是否登录，未登录则直接提示用户“请先登录”，且不向服务器发送请求。

具体实施：

1 “pages/ucenter/index/index”

修改点击按钮的登录流程

1、实现自定义弹框
自定义弹框通用实现看这里：微信小程序自定义弹窗(可通用)
把通用实现中的 此处是填充的布局代码 替换为下面代码

<view>请登录后继续进行操作</view>   
 <view class ="horizontal-diaplay">        
  	<button type="primary" plain="true" bindtap="toggleDialog" > 暂不登录</button>   
  	<button type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"> 立即登录</button>    
 </view>

2、修改原来的“点击登录”按钮实现

<button class="userinfo" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
……
</button>

修改为：

<button class="userinfo" bindtap="toggleDialog">
……
</button>

3、toggleDialog 在通用实现基础上修改

toggleDialog:function()
{      	
	let userInfo = wx.getStorageSync('userInfo');      
	let token = wx.getStorageSync('token');
	if (userInfo && token) {        return;      } 
	      
	this.setData({         showDialog:!this.data.showDialog       })      
 },

2 “pages/utils/util.js”

自动弹出授权页面修改为记录日志，并清除本地用户信息：

/** * 封装微信的的request */
function request（...）
{
……
return new Promise(function (resolve, reject) {
 wx.request({
 ……，
 success: function (res) {
 ……
 if (res.statusCode == 200)
  {
      if (res.data.errno == 401) {                      
      /*微信授权登录方式整改，不得直接跳转到授权页面，只能提示用户登录*/
     /*wx.navigateTo({url: '/pages/auth/btnAuth/btnAuth',})*/                      
     console.log("用户还未登录");                     
     /*清空本地数据*/                      
     wx.removeStorageSync('token'); 
     wx.removeStorageSync('userInfo');                                         
     } else
    { 
       resolve(res.data);  
    }                
} else
{
   reject(res.errMsg);
}
 }，
 ……
 });
}）;
}

3 “pages/ucenter/index/index”

在 ucenter/index 页面中包含 “地址管理”这个页面跳转链接，需要用户授权后才能正确显示内容。
以此项为例，进行修改：
发送访问请求前先本地检查用户是否登录，未登录则直接提示用户“请先登录”，且不向服务器发送请求。

wxml修改前：

    <view class="item">      
   <navigator url="../address/address" class="a">       
   	<text class="icon address"></text>        
     	<text class="txt">地址管理</text>        
    </navigator>
  </view>

wxml修改后：

    <view class="item" data-url='../address/address' bindtap="checkLogin">     
     	<view class = "a">        
     	 <text class="icon address"></text>        
    	 <text class="txt">地址管理</text>        
       </view>      
   </view>

js新增函数checkLogin

checkLogin: function (event)
{   
	 if (!util.isUserLogin()) 
 	{      
 		util.showHintToast("登录后可查看");     
 		return;    
  	}    
  	var url = event.currentTarget.dataset.url;    
  	wx.navigateTo({      url: url,    })  
  }