上一(yi)篇的(de)的(de)的(de)鏈(lian)接(jie) 賴了一(yi)個星期了，let us 接(jie)著上一(yi)篇的(de)搞。

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

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

• 小程序登陸邏輯與登陸狀態維持的兩種姿勢
• 發送評論時的一個投機倒把的小“優化”

小程序微信登陸與前端登陸狀態保存

小程序登陸

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

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

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

然后，明確一(yi)下微信(xin)登(deng)陸過程中的幾個概念

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

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

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

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

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

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

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

至此，本項目(mu)中微信(xin)登(deng)陸的(de)流(liu)程搞完了(le)。登(deng)陸完的(de)結果就是，后(hou)臺新增或更新了(le)用戶數(shu)據(ju)，小程序端有了(le)token。

小程序登陸狀態保持

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

• token（個人推薦）
• session

先說(shuo)第一種，也是本項目采(cai)用的(de)方(fang)法(fa)，其實在上面的(de)步(bu)驟5、6已(yi)經把這個方(fang)法(fa)將清楚了(le)，

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

第二(er)種(zhong)也在(zai)做網站用戶(hu)(hu)登(deng)(deng)陸(lu)的(de)時候是(shi)非常常見(jian)的(de)操作，在(zai)擼(lu)網站的(de)時候，用戶(hu)(hu)登(deng)(deng)陸(lu)后(hou)把用戶(hu)(hu)信(xin)息存到(dao)(dao)session里，用戶(hu)(hu)在(zai)請求(qiu)的(de)時候能(neng)夠從session中(zhong)取到(dao)(dao)用戶(hu)(hu)信(xin)息，之所(suo)以這樣是(shi)因為，瀏(liu)覽(lan)(lan)器(qi)(qi)(qi)(qi)請求(qiu)服務(wu)(wu)器(qi)(qi)(qi)(qi)，服務(wu)(wu)器(qi)(qi)(qi)(qi)響應時，會(hui)帶(dai)一個sessionid回(hui)去給瀏(liu)覽(lan)(lan)器(qi)(qi)(qi)(qi)，瀏(liu)覽(lan)(lan)器(qi)(qi)(qi)(qi)下次(ci)請求(qiu)時候會(hui)自動帶(dai)著(zhu)sessionid，服務(wu)(wu)器(qi)(qi)(qi)(qi)會(hui)根據sessionid來到(dao)(dao)相應的(de)會(hui)話里，所(suo)以能(neng)取到(dao)(dao)session中(zhong)的(de)用戶(hu)(hu)

BUT在小程序(xu)中有所不(bu)(bu)同，這是因為小程序(xu)網絡訪問是用的(de)微信封裝的(de)wx.request，而(er)該方法并不(bu)(bu)會(hui)把(ba)sessionid存(cun)下來，因此，為了能和(he)網站登陸搞成一(yi)個邏輯，我們手動存(cun)一(yi)下sessionid，在下次請求的(de)時(shi)候帶(dai)著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 });
}

復制代碼

下班了(le)(le)下班了(le)(le)，先寫到這明天繼續擼