小程序实现授权登陆的解决方案

来源：动视网责编：小采时间：2020-11-27 22:03:04

小程序实现授权登陆的解决方案

小程序实现授权登陆的解决方案:前言之前写过一个关于微信授权登陆的文章传送门最近在做小程序的项目，依旧是商城，又开始研究微信的登陆授权坑，第一次接触小程序，授权登陆也是一塌糊涂以后再慢慢的改进场景微信用户可以通过搜索进入小程序也可以通过别人分享进入小程序进入小

推荐度：

点击下载本文 文档为doc格式

导读小程序实现授权登陆的解决方案:前言之前写过一个关于微信授权登陆的文章传送门最近在做小程序的项目，依旧是商城，又开始研究微信的登陆授权坑，第一次接触小程序，授权登陆也是一塌糊涂以后再慢慢的改进场景微信用户可以通过搜索进入小程序也可以通过别人分享进入小程序进入小

前言

之前写过一个关于微信授权登陆的文章

传送门

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

场景

微信用户可以通过搜索进入小程序

也可以通过别人分享进入小程序

进入小程序之后需要用户授权拿到用户信息进行注册

代码实现

初始化页面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的逻辑大概就是这些

<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里写任何东西。第一次接触，希望以后能优化了再发文记录一下

小程序实现授权登陆的解决方案

推荐度：

点击下载本文 文档为doc格式

标签：登录小程序授权

热门焦点

小程序实现授权登陆的解决方案

小程序实现授权登陆的解决方案

小程序实现授权登陆的解决方案

最新推荐

猜你喜欢

热门推荐