您好,欢迎访问一九零五行业门户网

小程序授权登陆的解决方法(附代码)

本篇文章给大家带来的内容是关于小程序授权登陆的解决方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌糊涂以后再慢慢的改进
场景
微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册
代码实现
初始化页面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里写任何东西。第一次接触,希望以后能优化了再发文记录一下
以上就是小程序授权登陆的解决方法(附代码)的详细内容。
其它类似信息

推荐信息