這篇文章帶給大家的內容是關於小程式授權登陸的解決方法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
最近在做小程序的項目，依舊是商城，又開始研究微信的登陸授權坑，第一次接觸小程序，授權登陸也是一塌糊塗以後再慢慢的改進
場景
微信用戶可以透過搜尋進入小程式
也可以透過別人分享進入小程式
進入小程式之後需要用戶授權拿到用戶資訊進行註冊
程式碼實作
初始化頁面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寫任何東西。第一次接觸，希望以後能優化了再發文記錄一下
#
以上是小程式授權登陸的解決方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
