【開源項目筆記: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,    })  
  }