前言
之前写过一个关于微信授权登陆的文章
传送门
最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌糊涂以后再慢慢的改进
场景
- 微信用户可以通过搜索进入小程序
- 也可以通过别人分享进入小程序
- 进入小程序之后需要用户授权拿到用户信息进行注册
代码实现
初始化页面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里写任何东西。第一次接触,希望以后能优化了再发文记录一下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。