欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)授權(quán)登陸的解決方案

 更新時間:2018年12月02日 17:05:35   作者:乖摸摸頭  
這篇文章主要介紹了小程序?qū)崿F(xiàn)授權(quán)登陸的解決方案,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

前言

之前寫過一個關(guān)于微信授權(quán)登陸的文章

傳送門

最近在做小程序的項目,依舊是商城,又開始研究微信的登陸授權(quán)坑,第一次接觸小程序,授權(quán)登陸也是一塌糊涂以后再慢慢的改進

場景

  • 微信用戶可以通過搜索進入小程序
  • 也可以通過別人分享進入小程序
  • 進入小程序之后需要用戶授權(quán)拿到用戶信息進行注冊

代碼實現(xiàn)

初始化頁面home頁用戶第一次進入小程序必須授權(quán)后臺注冊并登陸

app.json

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

login.js邏輯進入頁面判斷一下是不是授權(quán)過,判斷用戶是否已經(jīng)授權(quán),已經(jīng)授權(quán)顯示登陸,沒有授權(quán)顯示授權(quán),用戶無論是注冊還是登陸用的是后臺提供的同一個接口。返回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() {
  // 如果已經(jīng)授權(quán)則顯示登錄,直接登錄不調(diào)用授權(quán)
  App.WxService.getSetting().then(res => {
   if (res.authSetting['scope.userInfo']) {
    this.setData({
     isauth: true
    })
   }
  })
  //token 不能在page外面定義,變量寫在 page 外面有緩存
  const token = App.WxService.getStorageSync('utoken')
  // 如果有token顯示已經(jīng)授權(quán)
  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是回調(diào)的方式,這里使用的是promise。

先判斷有沒有授權(quán),沒有授權(quán)顯示點擊授權(quán),有授權(quán)顯示點擊登錄,調(diào)用的方法都是wechatSignUp,拿到wx.login的code和wx.getUserInfo的數(shù)據(jù)給后臺,然后后臺返回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}}">請同意授權(quán)</view>
   <view class="alert-title" wx:if="{{isauth}}">請登錄</view>
   <view class="alert-desc">
    <view class="alert-text">為了讓頭號買手可以更好的為您服務(wù)</view>
   </view>
  </view>
  <button type='primary' wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">確認授權(quán)</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">近期你已經(jīng)授權(quán)登陸過商城</view>
  <view class="logged-text">自動登錄中</view>
 </view>
</view>

訪問后臺接口的時候在header里傳token如果后臺沒有拿到token就返回401,前端統(tǒng)一攔截跳轉(zhuǎn)到登陸頁面

結(jié)束

關(guān)于app.js本來打算在app做攔截的,但是異步請求總是在進入頁面后才拿到后臺返回的數(shù)據(jù),因為用戶可能從商品詳情頁等其他頁面進入小程序,授權(quán)后要返回進入頁面,在app.js中攔截就無法返回頁面了,所以就直接在頁面的js里去判斷,還好可以分享的頁面不多所以就沒有在app.js里寫任何東西。第一次接觸,希望以后能優(yōu)化了再發(fā)文記錄一下

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js彈出確認是否刪除對話框

    js彈出確認是否刪除對話框

    這篇文章主要介紹了js彈出確認是否刪除對話框,具體實現(xiàn)代碼如下,需要的朋友可以參考下
    2014-03-03
  • 詳細討論JavaScript中的求值策略

    詳細討論JavaScript中的求值策略

    這篇文章主要介紹了詳細討論JavaScript中的求值策略,對求值策略感興趣的同學(xué),可以參考下
    2021-04-04
  • js精準計算

    js精準計算

    這篇文章主要介紹了js精準計算,對此感興趣的同學(xué),可以實驗一下
    2021-04-04
  • js彈出窗口簡單實現(xiàn)代碼

    js彈出窗口簡單實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了js彈出窗口的簡單實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 關(guān)于layui toolbar和template的結(jié)合使用方法

    關(guān)于layui toolbar和template的結(jié)合使用方法

    今天小編就為大家分享一篇關(guān)于layui toolbar和template的結(jié)合使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 通過大白話理解微信小程序獲取授權(quán)

    通過大白話理解微信小程序獲取授權(quán)

    最近由于公司需要研究了一下微信小程序的開發(fā),特此記錄一下小程序獲取授權(quán)的流程,便于自己理解,下面這篇文章主要給大家介紹了關(guān)于如何通過大白話理解微信小程序獲取授權(quán)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • JS異步處理的進化史深入講解

    JS異步處理的進化史深入講解

    這篇文章主要給大家介紹了關(guān)于JS異步處理的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習或者使用JS具有一定的參考學(xué)習價值,需要的朋友們下面來一起學(xué)習學(xué)習吧
    2019-08-08
  • TopList標簽和JavaScript結(jié)合兩例

    TopList標簽和JavaScript結(jié)合兩例

    TopList標簽和JavaScript結(jié)合兩例...
    2007-08-08
  • 自己實現(xiàn)ajax封裝示例分享

    自己實現(xiàn)ajax封裝示例分享

    這篇文章主要介紹了自己實現(xiàn)ajax封裝示例,需要的朋友可以參考下
    2014-04-04
  • 微信小程序如何獲取圖片寬度與高度

    微信小程序如何獲取圖片寬度與高度

    這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取圖片寬度與高度的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2021-03-03

最新評論