媒介

之前写过一个关于微信受权上岸的文章
传送门
近来在做小顺序的项目，依旧是商城，又最先研讨微信的上岸受权坑，第一次打仗小顺序，受权上岸也是一塌糊涂今后再逐步的革新

场景

微信用户能够经由过程搜刮进入小顺序
也能够经由过程他人分享进入小顺序
进入小顺序以后须要用户受权拿到用户信息举行注册

代码完成

初始化页面home页用户第一次进入小顺序必需受权背景注册并上岸
app.json

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

login.js逻辑进入页面推断一下是不是是受权过，推断用户是不是已受权，已受权显现上岸，没有受权显现受权，用户无论是注册照样上岸用的是背景供应的同一个接口。返回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() {
    // 假如已受权则显现登录,直接登录不挪用受权
    App.WxService.getSetting().then(res => {
      if (res.authSetting['scope.userInfo']) {
        this.setData({
          isauth: true
        })
      }
    })
    //token 不能在page表面定义，变量写在 page 表面有缓存
    const token = App.WxService.getStorageSync('utoken')
    // 假如有token显现已受权
    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是回调的体式格局，这里运用的是promise。
先推断有无受权，没有受权显现点击受权，有受权显现点击登录，挪用的要领都是wechatSignUp，拿到wx.login的code和wx.getUserInfo的数据给背景，然后背景返回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}}">请赞同受权</view>
      <view class="alert-title" wx:if="{{isauth}}">请登录</view>
      <view class="alert-desc">
        <view class="alert-text">为了让头号买手能够更好的为您服务</view>
      </view>
    </view>
    <button type='primary' wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">确认受权</button>
    <button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">确认登录</button>
  </view>
  <view class="logged" wx:else>
    <image class="logged-icon" src="./s-toplogo@2x.png" />
    <view class="logged-text">近期你已受权上岸过商城</view>
    <view class="logged-text">自动登录中</view>
  </view>
</view>

接见背景接口的时刻在header里传token假如背景没有拿到token就返回401，前端一致阻拦跳转到上岸页面

完毕

关于app.js原本打算在app做阻拦的，然则异步要求总是在进入页面后才拿到背景返回的数据，由于用户能够从商品详情页等其他页面进入小顺序，受权后要返回进入页面，在app.js中阻拦就没法返回页面了，所以就直接在页面的js里去推断，还好能够分享的页面不多所以就没有在app.js里写任何东西。第一次打仗，愿望今后能优化了再发文纪录一下