微信小程序用户授权环节实现过程
前端施工员 人气:0在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信息的授权后,获取到相关信息
因为不止一个页面的跳转需要此授权校验的功能,所以我们选择封装一个授权校验的公共组件,跳转到需要验证的页面,需要进行授权登录
公共组件权限判断
封装公共组件,在需要使用校验的地方引入,进行判断
逻辑判断:
存入了手机号,则校验中的回调函数允许执行
未存入手机号,则先判断有无存入微信授权信息,(有的话,去存手机号,没有的话,先去存授权信息)
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 }) } }) },
加载全部内容