新版小法度楷模登录授权若何做

因为微信小法度楷模api的进级，微信小法度楷模的登录授权也与之前纷歧样，那么新版小法度楷模登录授权若何做？以下为巨匠介绍流程：

模式概览

因为微信小法度楷模的改版导致直接弹出授权的登录编制将慢慢不再撑持，受影响的有 wx.getUserInfo 接口，和 wx.authorize 接口授入 scope=”scope.userInfo” 的气象。所以需要从头设计一套合适的登录授权流程。整体流程以下图：

自动登录

因为APP中有些页面默许需要登录的，如[小我中心]页面，需要登录获获得用户信息，才能继续操作。这样的页面就需要在每次进入页面(onShow)时剖断是不是授权了。

profile页面

onShow () {
    login(() => {
        do something...
    })
}

关于登录授权相关的逻辑都可以封装在handleLogin.js中

handleLogin.js

// 最早login
function login (callback) {
  wx.showLoading()
  wx.login({
    success (res) {
      if (res.code) {
        // 登录成功，获得用户信息
        getUserInfo(res.code, callback)
      } else {
        // 否则弹窗显示，showToast需要封装
        showToast()
      }
    },
    fail () {
      showToast()
    }
  })
}

// 获得用户信息
function getUserInfo (code, callback) {
  wx.getUserInfo({
    // 获得成功，全局存储用户信息，斥地者处事器登录
    success (res) {
      // 全局存储用户信息
      store.commit('storeUpdateWxUser', res.userInfo)
      postLogin(code, res.iv, res.encryptedData, callback)
    },
    // 获得失踪踪败，弹窗提醒一键登录
    fail () {
      wx.hideLoading()
      // 获得用户信息失踪踪败，清楚全局存储的登录状况，弹窗提醒一键登录
      // 操作token治理登录态的，清楚存储全局的token
      // 操作cookie治理登录态的，可以清楚全局登录状况治理的变量
      store.commit('storeUpdateToken', '')
      // 获得不到用户信息，声名用户没有授权或撤销授权。弹窗提醒一键登录，后续会讲
      showLoginModal()
    }
  })
}

// 斥地者处事端登录
function postLogin (code, iv, encryptedData, callback) {
  let params = {
    code: code,
    iv: iv,
    encryptedData: encryptedData
  }
  request(apiUrl.postLogin, params, 'post').then((res) => {
    if (res.code == 1) {
      wx.hideLoading()
      // 登录成功，
      // 操作token治理登录态的，存储全局token，用于算作登录态剖断，
      // 操作cookie治理登录态的，可以存肆意变量算作已登录状况
      store.commit('storeUpdateToken', res.data.token)
      callback && callback()
    } else {
      showToast()
    }
  }).catch((err) => {
    showToast()
  })
}

// 显示toast弹窗
function showToast (content = '登录失踪踪败，请稍后再试') {
  wx.showToast({
    title: content,
    icon: 'none'
  })
}

到此为止，登录就算完成了。不管操作token仍是cookie都可以，都能有正常的登录态了，可以履行后续操作。

全数流程是 wx.login => wx.getUserInfo => 斥地者处事器登录postLogin。

挪用接口

某些页面默许不需要登录，但某些用户操作事务是需要登录状况的，所以一者可以剖断全局存储的登录状况治理的变量，假定为false，那么直接可以弹窗提醒需要一键登录。二者假定全局状况为true，则挪用接口看接口返回的code是不是是未登录状况（此气象一般来讲是登录态过时），未登录的话也弹窗提醒需要一键登录。

某页面（需登录的用户操作）

getPlayer () {
    // 剖断全局是不是有登录状况，假定没有直接弹窗提醒一键登录
    isLogin(() => {
        let params = {
            token: this.token
        }
        request(apiUrl.getPlayer, params).then((res) => {
            // TODO: 删除打印
            if (res.code === 1) {
                store.commit('storeUpdateUser', res.data.player_info)
            } else {
                // 获得失踪踪败了，假定是code是未登录，则去登录，然后履行回调函数this.getPlayer
                // 假定code不是未登录，直接弹窗报短处信息
                handleError(res, this.getPlayer)
            }
        }).catch((err) => {
            handleError(err)
        })
    })
}

handleLogin.js

// 剖断是不是登录
function isLogin (callback) {
  let token = store.state.token
  if (token) {
    // 假若有全局存储的登录态，且则认为他是登录状况
    callback && callback()
  } else {
    // 假定没有登录态，弹窗提醒一键登录
    showLoginModal()
  }
}

// 接口挪用失踪踪败措置，
function handleError (res, callback) {
  // 划定-3041和-3042分袂代表未登录和登录态失踪踪效
  if (res.code == -3041 || res.code == -3042) {
    // 弹窗提醒一键登录
    showLoginModal()
  } else if (res.msg) {
    // 弹窗显示短处信息
    showToast(res.msg)
  }
}

到此为止，需要登录的用户操作便可以措置了。假定全局登录状况变量为true，先去挪用接口，遵循返回的信息是不是是未登录再措置。

弹窗提醒

因为微信小法度楷模授权的接口wx.getUserInfo和wx.authorize中scope 为 “scope.userInfo” ，新版中挪用这两个API是不会自动触发弹出授权窗口的。需要操作 <button open-type="getUserInfo"></button> 编制。

上面代码中多处闪现的showLoginModal是用于显示一键登录的。以下：

handleLogin.js

// 显示一键登录的弹窗
function showLoginModal () {
  wx.showModal({
    title: '提醒',
    content: '你还未登录，登录后可获得完全体验 ',
    confirmText: '一键登录',
    success (res) {
      // 点击一键登录，去授权页面
      if (res.confirm) {
        wx.navigateTo({
          url: '授权登录页面地址',
        })
      }
    }
  })
}

关于授权登录，我们做了一个专门的页面措置，此处的button为<button type="primary" v-if="canIUse" open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>。以下：

getUserInfo (e) {
    if (e.target.userInfo) {
        // 点击Button弹窗授权，假定授权了，履行login
        // 因为Login流程中有wx.getUserInfo，此时便可以获获得了
        login(() => {
            // 登录成功后，返回
            wx.navigateBack()
        })
    }
}

到此为止，全数授权和登录流程就算走完了。可以回偏激梳理一下最最早的流程图，理当就可以理清全数逻辑了。