青銅選手帶你動手擼一個博客小程序給自己（第二期）

發(fā)布時間：2018-11-15 16:43 所屬欄目：小程序開發(fā)教程

上一篇的的的鏈接賴了一個星期了，let us 接著上一篇的搞。

在上一篇里搞了一下基礎設施建設，這一篇我們...稍微搞那么一丟丟上層建筑。

這一篇里本菜雞想分享的tip

小程序登陸邏輯與登陸狀態(tài)維持的兩種姿勢
發(fā)送評論時的一個投機倒把的小“優(yōu)化”

小程序微信登陸與前端登陸狀態(tài)保存

小程序登陸

小程序登陸其實是個比較簡單的基本操作，但凡是看過微信開發(fā)文檔的應該都能懂，不過本菜雞還是想嘗試性的分享一下。

首先先明確一下為啥要用微信登陸，在本菜雞看來在這個項目里使用微信登陸主要有三個目的

方便用戶：相比于用戶手動注冊、填寫各種信息、再手動輸入賬號密碼登陸，利用微信登陸用戶點一下，就可以完成上面的全部操作，注冊、登陸全都由后臺利用微信提供的相關的信息完成
方便后臺用戶管理
使用微信的相關能力：通過微信登陸，后臺可以獲得唯一標識用戶的openid，而這個openid，是后臺調用微信相關敏感接口的必填項（例如：微信支付）

然后，明確一下微信登陸過程中的幾個概念

然后，結合本次項目的實際情況捋一下微信登陸的流程

調用wx.login方法獲取code ，順手調用一下wx.getUserInfo獲取一下用戶的基本信息（頭像，微信名啥的）
調用后端接口，將code與獲取的用戶信息userInfo（非必需）傳遞給后端。
后端接收到參數，將code拿出來與存在后端的appid、appsecrect拼接成微信登陸鏈接

$url='https://api.weixin.qq.com/sns/jscode2session?appid='.$this->appId.'&secret='.$this->appSecret.'&js_code='.$code.'&grant_type=authorization_code';
復制代碼

訪問該鏈接獲得返回結果（json格式的），驗證下是否成功，如果OJBK，就從結果里掏出openid

$wxResult=json_decode(curl_get($url),true);
 if(!$wxResult||!array_key_exists('openid',$wxResult)){
      return ResultService::failure('獲取openid不成功');
 }
 $openId=$wxResult['openid'];
復制代碼

其實獲得到openid微信登陸已經差不多了，剩下就是怎么用的問題了，下面的步驟是在本次項目的流程，供各位老哥參考

根據openid查一下數據庫，看看是否是存在，若存在，則說明是老用戶，不用新增用戶，直接用在步驟3中獲取到的由前端傳來的userInfo更新一下后臺的用戶信息即可（頭像，省份，微信名啥的）。若不存在，則這是個新用戶，把openid與userInfo存到用戶表中
經過步驟5，庫里已經有了這個用戶的數據，然后拿用戶數據，按照一定規(guī)則，生成個token返回給小程序端，小程序端把token存到localStorage里，后端將token與用戶信息以鍵值對的形式存到緩存里，以后小程序請求的時候帶著token來，后端根據token查緩存來確定用戶登陸狀態(tài)。

至此，本項目中微信登陸的流程搞完了。登陸完的結果就是，后臺新增或更新了用戶數據，小程序端有了token。

小程序登陸狀態(tài)保持

本菜雞個人覺得常用的保持登陸狀態(tài)的方法有兩種

token（個人推薦）
session

先說第一種，也是本項目采用的方法，其實在上面的步驟5、6已經把這個方法將清楚了，

登陸后服務端下發(fā)token給小程序端，
同時服務端自己也存一份，存哪里就根據實際情況（cache、redis、session啥的都行），然后搞個有效期，過期了就消失得那種。
小程序每次請求后端接口的時候把token放到header里
后端在處理請求前先把token從header里取出來，拿這個token去查緩存，如果有，就說明用戶還在登陸狀態(tài)，繼續(xù)往后走，如果沒有，則說明用戶離線了，就直接返回一下告訴小程序端需要重新登陸，小程序收到后跳轉到登錄頁。

第二種也在做網站用戶登陸的時候是非常常見的操作，在擼網站的時候，用戶登陸后把用戶信息存到session里，用戶在請求的時候能夠從session中取到用戶信息，之所以這樣是因為，瀏覽器請求服務器，服務器響應時，會帶一個sessionid回去給瀏覽器，瀏覽器下次請求時候會自動帶著sessionid，服務器會根據sessionid來到相應的會話里，所以能取到session中的用戶

BUT在小程序中有所不同，這是因為小程序網絡訪問是用的微信封裝的wx.request，而該方法并不會把sessionid存下來，因此，為了能和網站登陸搞成一個邏輯，我們手動存一下sessionid，在下次請求的時候帶著sessionid去即可。

部分代碼如下

服務端（PHP）

//前面先搞登陸，登陸完了把用戶存到session里然后
return ResultService::success('',['sessionId'=>session_id()]);

復制代碼
小程序端

//登陸
dataUtils.userLogin({ code: code, info: JSON.stringify(info) }).then(res => {
        if (res.statusCode == '200') {
          wx.setStorageSync('sessionId', res.data.data.sessionId);
          $Message({
            content: '登陸成功',
            type: 'success'
          });
          this.checkUserLogin();
        }
        else {
          $Message({
            content: '登陸未成功',
            type: 'error'
          });
        }
//請求例子（不同后端header名不一樣，比如php的后端就是 PHPSESSID=你的sessionId）
function userJoinPromise(data,sessionId){
  let url = 'travel/api/userJoin';
  return getServerDataPromise(url, data, { 'Cookie': 'PHPSESSID=' + sessionId });
}