快捷導(dǎo)航

微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程

更新時(shí)間：2023年01月31日 09:09:23 作者：前端施工員

這篇文章主要介紹了微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程，在商城項(xiàng)目中，我們需要對(duì)部分的頁(yè)面，進(jìn)行一個(gè)授權(quán)的判別，例如購(gòu)物車(chē)，及個(gè)人中心，需要完成用戶信息的授權(quán)后，獲取到相關(guān)信息

公共組件權(quán)限判斷

封裝公共組件，在需要使用校驗(yàn)的地方引入，進(jìn)行判斷

邏輯判斷：

存入了手機(jī)號(hào)，則校驗(yàn)中的回調(diào)函數(shù)允許執(zhí)行

未存入手機(jī)號(hào)，則先判斷有無(wú)存入微信授權(quán)信息，（有的話，去存手機(jī)號(hào)，沒(méi)有的話，先去存授權(quán)信息）

function CheckAuth(callback){
  // wx.getStorageSync 獲取微信本地存儲(chǔ)
  // 判斷是否有存入手機(jī)號(hào)進(jìn)本地存儲(chǔ)
  if(wx.getStorageSync('tel')){
    //處理業(yè)務(wù)
    callback()
  }else{
    // 沒(méi)有存入手機(jī)號(hào)，但是判斷是否有認(rèn)證信息的 token
    if(wx.getStorageSync('token')){
      wx.navigateTo({
        url: '/pages/telform/telform',
      })
      // 沒(méi)有存入手機(jī)號(hào)，也沒(méi)有 token 認(rèn)證信息
    }else{
      wx.navigateTo({
        url: '/pages/auth/auth',
      })
    }
  }
}
export default CheckAuth

例如，shopcar 購(gòu)物車(chē)組件：

校驗(yàn)通過(guò)情況：（已登陸過(guò)）

在進(jìn)行獲取購(gòu)物車(chē)數(shù)據(jù)前，觸發(fā) CheckAuth( )，且傳入其中的回調(diào)函數(shù)為獲取對(duì)應(yīng)列表數(shù)據(jù)，若有手機(jī)號(hào)，則運(yùn)行執(zhí)行該回調(diào)函數(shù)，獲取數(shù)據(jù)，渲染數(shù)據(jù)

  /*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示*/
  onShow() {
    // 驗(yàn)證通過(guò)后可以觸發(fā)回調(diào)函數(shù)
    CheckAuth(()=>{
      let {nickName} = wx.getStorageSync('token')
      let tel = wx.getStorageSync('tel')
      request({
        url:`/carts?_expand=good&username=${nickName}&tel=${tel}`
      }).then(res=>{
       this.setData({
         cartList:res
       })
      })
     })
  },

校驗(yàn)未通過(guò)情況：（未存入任何信息，首次登陸）

未獲取到本地的存儲(chǔ)授權(quán)信息及賬號(hào)信息，則進(jìn)行頁(yè)面的跳轉(zhuǎn)，跳轉(zhuǎn)至授權(quán)頁(yè)面

function CheckAuth(callback){
    // 已存入過(guò)手機(jī)號(hào)，直接可獲取數(shù)據(jù)
  if(wx.getStorageSync('tel')){
    //處理業(yè)務(wù)
    callback()
  }
    // 沒(méi)有存入手機(jī)號(hào)，但是判斷是否有認(rèn)證信息的 token
    else{
    if(wx.getStorageSync('token')){
      wx.navigateTo({
        url: '/pages/telform/telform',
      })   
    }
     // 沒(méi)有存入手機(jī)號(hào)，也沒(méi)有 token 認(rèn)證信息
     else{
      wx.navigateTo({
        url: '/pages/auth/auth',
      })
    }
  }
}

微信授權(quán)驗(yàn)證wx.getUserProfile()

使用 wx.getUserProfile( ) 獲取當(dāng)前微信的信息

驗(yàn)證成功后，在成功回調(diào)函數(shù)里存儲(chǔ) token 信息，再次跳轉(zhuǎn)至手機(jī)號(hào)存儲(chǔ)頁(yè)面

  // 獲取 微信授權(quán) 驗(yàn)證
  handleAuth(){
    wx.getUserProfile({
      desc: '用于完善會(huì)員資料',
      success:(res)=>{
        wx.setStorageSync('token', res.userInfo)
        wx.navigateTo({
          url: '/pages/telform/telform',
        })
      }
    })
  },

手機(jī)號(hào)帳號(hào)信息驗(yàn)證

頁(yè)面結(jié)構(gòu)：

<mp-form-page title="綁定手機(jī)號(hào)" subtitle="驗(yàn)證微信賬號(hào)后需要綁定手機(jī)號(hào)">
  <mp-cells title="信息">
    <mp-cell>
      <input class="weui-input" placeholder="請(qǐng)輸入手機(jī)號(hào)" bindinput="formInputChange" />
      <view slot="footer" class="weui-vcode-btn">獲取驗(yàn)證碼</view>
    </mp-cell>
  </mp-cells>
  <view slot="button">
    <button class="weui-btn" type="primary" bindtap="submitForm">確定</button>
  </view>
</mp-form-page>

引入 WeUI：

{
  "usingComponents": {
    "mp-form-page": "weui-miniprogram/form-page/form-page",
    "mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  },
  "navigationBarTitleText": "手機(jī)號(hào)綁定"
}

提交手機(jī)號(hào)：

未存入過(guò)信息，使用 post 請(qǐng)求存入新數(shù)據(jù)，跳轉(zhuǎn)回正常使用頁(yè)面

存入過(guò)了信息，不再重復(fù)存，跳轉(zhuǎn)回正常使用頁(yè)面

跳轉(zhuǎn)返回頁(yè)面：wx.navigateBack（）

  // 點(diǎn)擊確定 提交手機(jī)號(hào)
  submitForm(){
    // 手機(jī)號(hào)存入本地
    wx.setStorageSync('tel', this.data.tel)
    // 試著去數(shù)據(jù)庫(kù)找一下，相同 手機(jī)號(hào) 和 微信驗(yàn)證 的數(shù)據(jù)是否有
    request({
      url:`/users?tel=${this.data.tel}&nickName=${wx.getStorageSync('token').nickName}`
    }).then(res=>{
      // 數(shù)據(jù)庫(kù)未存過(guò)信息，post請(qǐng)求，去數(shù)據(jù)庫(kù)中新建一個(gè)數(shù)據(jù)，帶上token和手機(jī)號(hào)
      if(res.length===0) {
        request({
          url:`/users`,
          method:'post',
          data:{
            ...wx.getStorageSync('token'),
            tel:this.data.tel
          }
        }).then(res=>{
         // 回退兩級(jí)，返回到 購(gòu)物車(chē) 或 個(gè)人中心
          wx.navigateBack({
            delta:2
          })
        })
      } 
      // 數(shù)據(jù)庫(kù)存過(guò)信息，就不再重復(fù)存入，跳轉(zhuǎn)回正常頁(yè)面使用即可
      else {
        wx.navigateBack({
          delta:2
        })
      }     
    })
  },

到此這篇關(guān)于微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程的文章就介紹到這了,更多相關(guān)小程序用戶授權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: