前言
之前寫過一個關于微信授權登陸的文章
最近在做小程序的項目，依舊是商城，又開始研究微信的登陸授權坑，第一次接觸小程序，授權登陸也是一塌糊涂以后再慢慢的改進
場景
代碼實現
初始化頁面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里寫任何東西。第一次接觸，希望以后能優化了再發文記錄一下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
