如何解決小程序授權(quán)登錄的問題

這篇文章給大家分享的是有關(guān)如何解決小程序授權(quán)登錄的問題的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，綿陽電信機(jī)房，綿陽電信機(jī)房，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

場景

微信用戶可以通過搜索進(jìn)入小程序
也可以通過別人分享進(jìn)入小程序
進(jìn)入小程序之后需要用戶授權(quán)拿到用戶信息進(jìn)行注冊

代碼實現(xiàn)

初始化頁面home頁用戶第一次進(jìn)入小程序必須授權(quán)后臺注冊并登錄
app.json

{
"pages": [
    "pages/home/index", 
    "pages/login/index",
     ...
   ]
}

login.js邏輯進(jìn)入頁面判斷一下是不是授權(quán)過，判斷用戶是否已經(jīng)授權(quán)，已經(jīng)授權(quán)顯示登錄，沒有授權(quán)顯示授權(quán)，用戶無論是注冊還是登錄用的是后臺提供的同一個接口。返回token存在本地
login.js

const App = getApp()
import { loginModel } from '../../models/login.js'
import { MineModel } from '../../models/mine.js'
import { encodeUnicode } from '../../utils/index.js'
const ModelLogin = new loginModel()
const Modelmine = new MineModel()
Page({
  data: {
    logged: !1,
    isauth: false,
    locked: false
  },
  onLoad: function(options) {
    // 返回到之前要刷新
    var pages = getCurrentPages() // 獲取頁面棧
    var prevPage = pages[pages.length - 2] // 前一個頁面
    prevPage.setData({
      isBack: true
    })
  },
  onShow: function() {
    // 如果已經(jīng)授權(quán)則顯示登錄,直接登錄不調(diào)用授權(quán)
    App.WxService.getSetting().then(res => {
      if (res.authSetting['scope.userInfo']) {
        this.setData({
          isauth: true
        })
      }
    })
    //token 不能在page外面定義，變量寫在 page 外面有緩存
    const token = App.WxService.getStorageSync('utoken')
    // 如果有token顯示已經(jīng)授權(quán)
    this.setData({
      logged: !!token
    })
    token && setTimeout(this.goBack, 1500)
  },
  login() {
    this.wechatSignUp()
  },
  goBack() {
    // 返回登錄之前的頁面
    wx.navigateBack({
      delta: 1
    })
  },
  // 登陸注冊
  wechatSignUp(cd) {
    // 上鎖如果正在請求接口那么就返回
    if (this.data.locked) {
      return
    }
    this.data.locked = true
    //注冊或者登陸獲取token
    let code = ''
    App.WxService
      .login()
      .then(data => {
        code = data.code
        wx.setStorageSync('logincode', data.code)
        return App.WxService.getUserInfo()
      })
      .then(data => {
        // 請求后臺登錄注冊接口
        return ModelLogin.wechatSignUp({
          encrypteData: data.encryptedData,
          iv: data.iv,
          rawData: encodeUnicode(data.rawData), // 編碼
          signature: data.signature,
          code: code
        })
      })
      .then(data => {
        this.data.locked = false
        if (data.data.token == '') {
          wx.showToast({
            title: '登錄失敗',
            icon: 'none'
          })
          return
        }
        App.WxService.setStorageSync('utoken', data.data.token)
        // 訪問后臺接口獲取用戶信息
        ModelLogin.getVipInfo({ token: data.data.token }).then(res => {
          App.globalData.userInfo = res.data.userInfo
          // 返回上一頁
          this.goBack()
        })
      })
      .catch(err => {
        this.data.locked = false
        console.log(err)
      })
  }
})

這里的App.WxService等價于wx因為wx是回調(diào)的方式，這里使用的是promise。
先判斷有沒有授權(quán)，沒有授權(quán)顯示點擊授權(quán)，有授權(quán)顯示點擊登錄，調(diào)用的方法都是wechatSignUp，拿到wx.login的code和wx.getUserInfo的數(shù)據(jù)給后臺，然后后臺返回token，然后再去訪問后臺獲取用戶信息
login的邏輯大概就是這些
login.wxml

<view class="login-container">
  <view class="login" wx:if="{{ !logged }}">
    <view class="app-info">
      <image class="app-logo" src="./s-toplogo@2x.png" />
      <text class="app-name">商城</text>
    </view>
    <view class="alert">
      <view class="alert-title" wx:if="{{!isauth}}">請同意授權(quán)</view>
      <view class="alert-title" wx:if="{{isauth}}">請登錄</view>
      <view class="alert-desc">
        <view class="alert-text">為了讓頭號買手可以更好的為您服務(wù)</view>
      </view>
    </view>
    <button type='primary' wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">確認(rèn)授權(quán)</button>
    <button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">確認(rèn)登錄</button>
  </view>
  <view class="logged" wx:else>
    <image class="logged-icon" src="./s-toplogo@2x.png" />
    <view class="logged-text">近期你已經(jīng)授權(quán)登陸過商城</view>
    <view class="logged-text">自動登錄中</view>
  </view>
</view>

訪問后臺接口的時候在header里傳token如果后臺沒有拿到token就返回401，前端統(tǒng)一攔截跳轉(zhuǎn)到登錄頁面

感謝各位的閱讀！關(guān)于“如何解決小程序授權(quán)登錄的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：如何解決小程序授權(quán)登錄的問題
轉(zhuǎn)載來于：http://muchs.cn/article20/pichjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、建站公司、自適應(yīng)網(wǎng)站、虛擬主機(jī)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)