这篇文章主要介绍了微信小程序用户授权环节实现过程，在商城项目中，我们需要对部分的页面，进行一个授权的判别，例如购物车，及个人中心，需要完成用户信息的授权后，获取到相关信息

在商城项目中，我们需要对部分的页面，进行一个授权的判别，例如购物车，及个人中心，需要完成用户信息的授权后，获取到相关信息

因为不止一个页面的跳转需要此授权校验的功能，所以我们选择封装一个授权校验的公共组件，跳转到需要验证的页面，需要进行授权登录

公共组件权限判断

封装公共组件，在需要使用校验的地方引入，进行判断

逻辑判断：

存入了手机号，则校验中的回调函数允许执行

未存入手机号，则先判断有无存入微信授权信息，（有的话，去存手机号，没有的话，先去存授权信息）

function CheckAuth(callback){
  // wx.getStorageSync 获取微信本地存储
  // 判断是否有存入手机号进本地存储
  if(wx.getStorageSync('tel')){
    //处理业务
    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 购物车组件：

校验通过情况：（已登陆过）

在进行获取购物车数据前，触发 CheckAuth( )，且传入其中的回调函数为获取对应列表数据，若有手机号，则运行执行该回调函数，获取数据，渲染数据

/*** 生命周期函数--监听页面显示*/
onShow() {
  // 验证通过后可以触发回调函数
  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){
    // 已存入过手机号，直接可获取数据
  if(wx.getStorageSync('tel')){
    //处理业务
    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( ) 获取当前微信的信息

验证成功后，在成功回调函数里存储 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 请求存入新数据，跳转回正常使用页面

存入过了信息，不再重复存，跳转回正常使用页面

跳转返回页面：wx.navigateBack（）

// 点击确定 提交手机号
submitForm(){
  // 手机号存入本地
  wx.setStorageSync('tel', this.data.tel)
  // 试着去数据库找一下，相同 手机号 和 微信验证 的数据是否有
  request({
    url:`/users?tel=${this.data.tel}&nickName=${wx.getStorageSync('token').nickName}`
  }).then(res=>{
    // 数据库未存过信息，post请求，去数据库中新建一个数据，带上token和手机号
    if(res.length===0) {
      request({
        url:`/users`,
        method:'post',
        data:{
          ...wx.getStorageSync('token'),
          tel:this.data.tel
        }
      }).then(res=>{
       // 回退两级，返回到 购物车 或 个人中心
        wx.navigateBack({
          delta:2
        })
      })
    }
    // 数据库存过信息，就不再重复存入，跳转回正常页面使用即可
    else {
      wx.navigateBack({
        delta:2
      })
    }    
  })
},