微信小程序用户授权环节实现过程

 更新时间:2023年01月31日 09:09:23   作者:前端施工员  
这篇文章主要介绍了微信小程序用户授权环节实现过程,在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信息的授权后,获取到相关信息

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

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

公共组件权限判断

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

逻辑判断:

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

未存入手机号,则先判断有无存入微信授权信息,(有的话,去存手机号,没有的话,先去存授权信息)

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
        })
      }     
    })
  },

到此这篇关于微信小程序用户授权环节实现过程的文章就介绍到这了,更多相关小程序用户授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript读取本地文件常用方法流程解析

    JavaScript读取本地文件常用方法流程解析

    这篇文章主要介绍了JavaScript读取本地文件常用方法流程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 前端中的JS使用调试技巧

    前端中的JS使用调试技巧

    掌握各种js调试技巧,在前端开发中降低开发成本,起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。这篇文章主要介绍了前端中的JS使用调试技巧,需要的朋友可以参考下
    2022-12-12
  • BootStrap扔进Django里的方法详解

    BootStrap扔进Django里的方法详解

    这篇文章主要介绍了BootStrap扔进Django里的方法,小编认为本文介绍的不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • JavaScript 撑出页面文字换行

    JavaScript 撑出页面文字换行

    最近在做Web 页面,虽然不是很喜欢,不过既然公司安排了,就好好做吧,还是学了不少东西。
    2009-06-06
  • 让mayfish支持mysqli数据库驱动的实现方法

    让mayfish支持mysqli数据库驱动的实现方法

    mysql 是非持继连接函数而 mysqli 是永远连接函数。也就是说 mysql 每次链接都会打开一个连接的进程而 mysqli 多次运行 mysqli 将使用同一连接进程,从而减少了服务器的开销。
    2010-05-05
  • js时间日期格式化封装函数

    js时间日期格式化封装函数

    这里给大家推荐一款自己封装的js时间日期格式化的函数,非常的简洁实用,分享给有需要的小伙伴
    2014-12-12
  • ie8下修改input的type属性报错的解决方法

    ie8下修改input的type属性报错的解决方法

    当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,问题是ie8中是不允许修改input的type属性
    2014-09-09
  • js中[]、{}、()区别示例浅析

    js中[]、{}、()区别示例浅析

    很多人都知道在js中[]表示的是数组对象,{}表示的是对象,但是这两者的区别却说不出来,下面这篇文章主要给大家介绍了关于js中[]、{}、()区别的相关资料,需要的朋友可以参考下
    2023-06-06
  • JavaScript获取URL中参数querystring的方法详解

    JavaScript获取URL中参数querystring的方法详解

    这篇文章先给大家介绍了JavaScript获取URL中参数querystring的方法,而后有详解介绍了Location对象的属性和,Location对象的方法,对大家的理解很有帮助,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-10-10
  • js实现点击烟花特效

    js实现点击烟花特效

    这篇文章主要介绍了js实现点击烟花特效,帮助大家更好的利用js美化网页,感兴趣的朋友可以了解下
    2020-10-10

最新评论