php 小程序 登录,小程序授权登陆的解决方法（附代码）

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

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

场景

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

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

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

代码实现

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

app.json{

"pages": [

"pages/home/index",

"pages/login/index",

...

]

}

login.js逻辑进入页面判断一下是不是授权过，判断用户是否已经授权，已经授权显示登陆，没有授权显示授权，用户无论是注册还是登陆用的是后台提供的同一个接口。返回token存在本地

login.jsconst 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

商城

请同意授权

请登录

为了让头号买手可以更好的为您服务

确认授权

确认登录

近期你已经授权登陆过商城

自动登录中

访问后台接口的时候在header里传token如果后台没有拿到token就返回401，前端统一拦截跳转到登陆页面

结束

关于app.js本来打算在app做拦截的，但是异步请求总是在进入页面后才拿到后台返回的数据，因为用户可能从商品详情页等其他页面进入小程序，授权后要返回进入页面，在app.js中拦截就无法返回页面了，所以就直接在页面的js里去判断，还好可以分享的页面不多所以就没有在app.js里写任何东西。第一次接触，希望以后能优化了再发文记录一下