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

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

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

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

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

小程序登陸

小程序登陸其實(shí)是個(gè)比較簡(jiǎn)單的基本操作，但凡是看過(guò)微信開(kāi)發(fā)文檔的應(yīng)該都能懂，不過(guò)本菜雞還是想嘗試性的分享一下。

首先先明確一下 為啥要用微信登陸 ，在本菜雞看來(lái)在這個(gè)項(xiàng)目里使用微信登陸主要有三個(gè)目的

• 方便用戶 ：相比于用戶手動(dòng)注冊(cè)、填寫各種信息、再手動(dòng)輸入賬號(hào)密碼登陸，利用微信登陸用戶點(diǎn)一下，就可以完成上面的全部操作，注冊(cè)、登陸全都由后臺(tái)利用微信提供的相關(guān)的信息完成
• 方便后臺(tái)用戶管理
• 使用微信的相關(guān)能力 ：通過(guò)微信登陸，后臺(tái)可以獲得唯一標(biāo)識(shí)用戶的openid，而這個(gè)openid，是后臺(tái)調(diào)用微信相關(guān)敏感接口的必填項(xiàng)（例如：微信支付）

然后，明確一下微信登陸過(guò)程中的幾個(gè)概念

然后，結(jié)合本次項(xiàng)目的實(shí)際情況捋一下微信登陸的流程

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

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

4. 訪問(wèn)該鏈接獲得返回結(jié)果（json格式的），驗(yàn)證下是否成功，如果OJBK，就從結(jié)果里掏出openid

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

其實(shí)獲得到openid微信登陸已經(jīng)差不多了，剩下就是怎么用的問(wèn)題了，下面的步驟是在本次項(xiàng)目的流程，供各位老哥參考

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

至此，本項(xiàng)目中微信登陸的流程搞完了。登陸完的結(jié)果就是，后臺(tái)新增或更新了用戶數(shù)據(jù)，小程序端有了token。

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

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

• token（個(gè)人推薦）
• session

先說(shuō)第一種，也是本項(xiàng)目采用的方法，其實(shí)在上面的步驟5、6已經(jīng)把這個(gè)方法將清楚了，

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

第二種也在做網(wǎng)站用戶登陸的時(shí)候是非常常見(jiàn)的操作，在擼網(wǎng)站的時(shí)候，用戶登陸后把用戶信息存到session里，用戶在請(qǐng)求的時(shí)候能夠從session中取到用戶信息，之所以這樣是因?yàn)椋瑸g覽器請(qǐng)求服務(wù)器，服務(wù)器響應(yīng)時(shí)，會(huì)帶一個(gè)sessionid回去給瀏覽器，瀏覽器下次請(qǐng)求時(shí)候會(huì)自動(dòng)帶著sessionid，服務(wù)器會(huì)根據(jù)sessionid來(lái)到相應(yīng)的會(huì)話里，所以能取到session中的用戶

BUT在小程序中有所不同，這是因?yàn)樾〕绦蚓W(wǎng)絡(luò)訪問(wèn)是用的微信封裝的wx.request，而該方法并不會(huì)把sessionid存下來(lái)，因此，為了能和網(wǎng)站登陸搞成一個(gè)邏輯，我們手動(dòng)存一下sessionid，在下次請(qǐng)求的時(shí)候帶著sessionid去即可。

部分代碼如下

服務(wù)端（PHP）

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

復(fù)制代碼
小程序端

//登陸
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'
          });
        }
//請(qǐng)求例子（不同后端header名不一樣，比如php的后端就是 PHPSESSID=你的sessionId）
function userJoinPromise(data,sessionId){
  let url = 'travel/api/userJoin';
  return getServerDataPromise(url, data, { 'Cookie': 'PHPSESSID=' + sessionId });
}

復(fù)制代碼

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