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

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

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

公共組件權限判斷

封裝公共組件，在需要使用校驗的地方引入，進行判斷

邏輯判斷：

存入了手機號，則校驗中的回調函數(shù)允許執(zhí)行

未存入手機號，則先判斷有無存入微信授權信息，（有的話，去存手機號，沒有的話，先去存授權信息）

function CheckAuth(callback){
  // wx.getStorageSync 獲取微信本地存儲
  // 判斷是否有存入手機號進本地存儲
  if(wx.getStorageSync('tel')){
    //處理業(yè)務
    callback()
  }else{
    // 沒有存入手機號，但是判斷是否有認證信息的 token
    if(wx.getStorageSync('token')){
      wx.navigateTo({
        url: '/pages/telform/telform',
      })
      // 沒有存入手機號，也沒有 token 認證信息
    }else{
      wx.navigateTo({
        url: '/pages/auth/auth',
      })
    }
  }
}
export default CheckAuth

例如，shopcar 購物車組件：

校驗通過情況：（已登陸過）

在進行獲取購物車數(shù)據(jù)前，觸發(fā) CheckAuth( )，且傳入其中的回調函數(shù)為獲取對應列表數(shù)據(jù)，若有手機號，則運行執(zhí)行該回調函數(shù)，獲取數(shù)據(jù)，渲染數(shù)據(jù)

  /*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/
  onShow() {
    // 驗證通過后可以觸發(fā)回調函數(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
       })
      })
     })
  },

校驗未通過情況：（未存入任何信息，首次登陸）

未獲取到本地的存儲授權信息及賬號信息，則進行頁面的跳轉，跳轉至授權頁面

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

微信授權驗證wx.getUserProfile()

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

驗證成功后，在成功回調函數(shù)里存儲 token 信息，再次跳轉至手機號存儲頁面

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

手機號帳號信息驗證

頁面結構：

<mp-form-page title="綁定手機號" subtitle="驗證微信賬號后需要綁定手機號">
  <mp-cells title="信息">
    <mp-cell>
      <input class="weui-input" placeholder="請輸入手機號" bindinput="formInputChange" />
      <view slot="footer" class="weui-vcode-btn">獲取驗證碼</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": "手機號綁定"
}

提交手機號：

未存入過信息，使用 post 請求存入新數(shù)據(jù)，跳轉回正常使用頁面

存入過了信息，不再重復存，跳轉回正常使用頁面

跳轉返回頁面：wx.navigateBack（）

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

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

您可能感興趣的文章: