小程序授权登陆的处理方法（附代码）

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

本篇文章给大家带来的内容是关于小程序授权登陆的解决方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在做小程序的项目，依旧是商城，又开始研究微信的登陆授权坑，第一次接触小程序，授权登陆也是一塌糊涂以后再慢慢的改进

场景

微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册

代码实现

初始化页面home页用户第一次进入小程序必须授权后台注册并登陆
app.json

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

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里写任何东西。第一次接触，希望以后能优化了再发文记录一下
以上就是小程序授权登陆的解决方法（附代码）的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。



  关键词：小程序授权登陆的处理办法（附代码）