微信小程序如何保证每个页面都已经登陆详解

目录
  • 现状
  • 解决方案
  • 进一步解决方案
  • 最后

现状

一个微信小程序中,有首页,有个人页面,还有一些列表页面,详情页面等等,这些页面大部分是可以分享的。当分享出去的页面被一个另一个用户打开的时候,这个页面怎么确保这个用户已经登陆了呢?

网上有很多方案是在请求封装里面加一道拦截,如果没有token,就先调用登陆请求获取token后,再继续。

这种方案没毛病,只要注意一点,当一个页面有多个请求同时触发时,当所有请求拦截后,放到一个数组里面,在获取token成功后,遍历数组一个个请求就行。

但这个需求再复杂一点,比如连锁便利店小程序,大部分页面都需要有一个门店(因为需要根据门店获取当前门店商品的库存、价格等),这个门店是根据当前的定位来调用后台接口获得的,这个时候如果在请求里进行封装就太麻烦了。

解决方案

首先,我们注意到,登陆,获取定位与我们的页面请求是异步的,我们需要保证页面请求是在登陆和获取定位之后,但要是我们每个页面都写一个遍,可维护性就太差了。所以我们可以抽离出一个方法来做这件事。

所以代码就这样了:

const app = getApp()
Page({
  data: {
    logs: []
  },
  onLoad() {
    app.commonLogin(()=>{
        // 处理页页面请求
    })
  }
})

做到这里好像是解决我们的问题,但再想一想,如果还想做更多的事,比如说每个页面的onShareAppMessage统一处理,但我又不想在每个页面再写一遍,另外,我又想自己对每个页面实现一个watch,怎么做?

进一步解决方案

我们可以看到微信小程序,每个页面是一个Page(),那么我们可以给这个Page外面加一层壳子,我们可以有一个MyPage来替换这个Page,废话不多说,上代码:

tool.js 相关代码

/**
   * 处理合并参数
   */
  handlePageParamMerge(arg) {
    let numargs = arg.length; // 获取被传递参数的数值。
    let data = {}
    let page = {}
    for (let ix in arg) {
      let item = arg[ix]
      if (item.data && typeof (item.data) === 'object') {
        data = Object.assign(data, item.data)
      }
      if (item.methods && typeof (item.methods) === 'object') {
        page = Object.assign(page, item.methods)
      } else {
        page = Object.assign(page, item)
      }
    }
    page.data = data
    return page
  }

  /***
   * 合并页面方法以及数据, 兼容 {data:{}, methods: {}} 或 {data:{}, a:{}, b:{}}
   */
  mergePage() {
    return this.handlePageParamMerge(arguments)
  }

  /**
   * 处理组件参数合并
   */
  handleCompParamMerge(arg) {
    let numargs = arg.length; // 获取被传递参数的数值。
    let data = {}
    let options = {}
    let properties = {}
    let methods = {}
    let comp = {}
    for (let ix in arg) {
      let item = arg[ix]
      // 合并组件的初始数据
      if (item.data && typeof (item.data) === 'object') {
        data = Object.assign(data, item.data)
      }
      // 合并组件的属性列表
      if (item.properties && typeof (item.properties) === 'object') {
        properties = Object.assign(properties, item.properties)
      }
      // 合组件的方法列表
      if (item.methods && typeof (item.methods) === 'object') {
        methods = Object.assign(methods, item.methods)
      }
      if (item.options && typeof (item.options) === 'object') {
        options = Object.assign(options, item.options)
      }
      comp = Object.assign(comp, item)
    }
    comp.data = data
    comp.options = options
    comp.properties = properties
    comp.methods = methods
    return comp
  }

  /**
   * 组件混合 {properties: {}, options: {}, data:{}, methods: {}}
   */
  mergeComponent() {
    return this.handleCompParamMerge(arguments)
  }

  /***
   * 合成带watch的页面
   */
  newPage() {
    let options = this.handlePageParamMerge(arguments)
    let that = this
    let app = getApp()

    //增加全局点击登录判断
    if (!options.publicCheckLogin){
      options.publicCheckLogin = function (e) {
        let pages = getCurrentPages()
        let page = pages[pages.length - 1]
        let dataset = e.currentTarget.dataset
        let callback = null

        //获取回调方法
        if (dataset.callback && typeof (page[dataset.callback]) === "function"){
          callback = page[dataset.callback]
        }
        // console.log('callback>>', callback, app.isRegister())
        //判断是否登录
        if (callback && app.isRegister()){
          callback(e)
        }
        else{
          wx.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    }

    const { onLoad } = options
    options.onLoad = function (arg) {
      options.watch && that.setWatcher(this)
      onLoad && onLoad.call(this, arg)
    }

    const { onShow } = options
    options.onShow = function (arg) {
      if (options.data.noAutoLogin || app.isRegister()) {
        onShow && onShow.call(this, arg)
        //页面埋点
        app.ga({})
      }
      else {
        wx.navigateTo({
          url: '/pages/login/login'
        })
      }
    }

    return Page(options)
  }

  /**
   * 合成带watch等的组件
   */
  newComponent() {
    let options = this.handleCompParamMerge(arguments)
    let that = this
    const { ready } = options
    options.ready = function (arg) {
      options.watch && that.setWatcher(this)
      ready && ready.call(this, arg)
    }
    return Component(options)
  }

  /**
    * 设置监听器
    */
  setWatcher(page) {
    let data = page.data;
    let watch = page.watch;
    Object.keys(watch).forEach(v => {
      let key = v.split('.'); // 将watch中的属性以'.'切分成数组
      let nowData = data; // 将data赋值给nowData
      for (let i = 0; i < key.length - 1; i++) { // 遍历key数组的元素,除了最后一个!
        nowData = nowData[key[i]]; // 将nowData指向它的key属性对象
      }

      let lastKey = key[key.length - 1];
      // 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name'
      let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法
      let deep = watch[v].deep; // 若未设置deep,则为undefine
      this.observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey
    })
  }

  /**
   * 监听属性 并执行监听函数
   */
  observe(obj, key, watchFun, deep, page) {
    var val = obj[key];
    // 判断deep是true 且 val不能为空 且 typeof val==='object'(数组内数值变化也需要深度监听)
    if (deep && val != null && typeof val === 'object') {
      Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个key
        this.observe(val, childKey, watchFun, deep, page); // 递归调用监听函数
      })
    }
    var that = this;
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set: function (value) {
        if (val === value) {
          return
        }
        // 用page对象调用,改变函数内this指向,以便this.data访问data内的属性值
        watchFun.call(page, value, val); // value是新值,val是旧值
        val = value;
        if (deep) { // 若是深度监听,重新监听该对象,以便监听其属性。
          that.observe(obj, key, watchFun, deep, page);
        }
      },
      get: function () {
        return val;
      }
    })
  }

页面代码:

app.tool.newPage({
  data: {
    // noAutoLogin: false
  },
  onShow: function () {
    // 在这里写页面请求逻辑
  }
}

最后

代码是在线上跑了很久的,tool里的newPage封装,你可以根据自己的需求进行添加。总之,我这里是提供一种思路,如有更佳,欢迎分享。

到此这篇关于微信小程序如何保证每个页面都已经登陆的文章就介绍到这了,更多相关微信小程序保证页面登陆内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 扫微信小程序码实现网站登陆实现解析

    使用扫小程序码登陆网站 网络上关于实现本本功能的文章很多,但是给出案列的几乎没有,今天笔者实现用小程序码实现网站登陆,体验地址如下 https://idea.techidea8.com/open/idea.shtml?id=5 思路 核心流程 关键流程 建立场景sceneid和websocket的绑定关系 获得sceneid 场景ID可以前端生成,也可以后端生成,只需要保证sceneid的同一时间唯一性即可. 前端生成可以采用随机数加时间戳的形式,也可以用uuid算法 //时间戳 var sce

  • 微信小程序实现人脸识别登陆的示例代码

    前言 这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口.本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获! 步骤 步骤 涉及接口(百度云) 拍摄或者相册选择 并 上传比对样本照片到 人脸库 人脸库管理接口(main:人脸注册) 拍摄照片并上传,云服务器在线比对 人脸

  • 微信小程序授权登陆及每次检查是否授权实例代码

    授权登录 <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" class="fix">登录</button> //index.js //获取应用实例 var APPID ='xxx' var SECRET = 'xxx' const app = getApp() Page({ data: { list:

  • 详解微信小程序开发用户授权登陆

    本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口.

  • 微信小程序 自动登陆PHP源码实例(源码下载)

    微信小程序 自动登陆PHP源码实例 app.js 初始化APP自动登陆 您也可以在任何地方进行用户登陆验证 用法:首先在js文件中定义 var app = getApp(); app.getUserDataToken(); App({ onLaunch: function () { /*初始化APP自动登陆 * 您也可以在任何地方进行用户登陆验证 *用法:首先在js文件中定义 var app = getApp(); app.getUserDataToken(); */ this.getUserD

  • 微信小程序-详解微信登陆、微信支付、模板消息

    微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio

  • 微信小程序登陆注册功能的实现代码

    我们在开发小程序时,难免会用到登陆注册功能.通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发. 老规矩,先看效果图 通过上图可以看到我们主要实现了以下功能1,账号密码登陆2,账号密码注册3,退出登陆下面我们就来看下具体实现一,原理讲解 因为我们账号密码的注册,就是把用户设置的账号密码存到数据库里,登陆也是从数据库里取账号和密码来校验.所以我们必须要有数据库.如果用传统的数

  • 微信小程序 登陆流程详细介绍

    微信小程序 登陆流程 1:session_key和openId是什么?session_key 官方说明为: session_key是微信服务器生成的针对用户数据进行加密签名的密钥 session_key的用途 (1)对wx.getUserInfo()接口得到"用户信息中的密文"进行解密. (2)对它"稍作处理",用作维护小程序的登录态. "稍微处理"大体为: (1)生成一个随机数(官方把他叫做3rd_session) (2)把这个随机数当sess

  • 微信小程序调用微信登陆获取openid及java做为服务端示例

    一.微信小程序 第一步:调用 wx.login获取code 文档地址 第二步:判断用户是否授权读取用户信息 文档地址 第三步:调用wx.getUserInfo读取用户数据 文档地址 第四步:由于小程序后台授权域名无法授权微信的域名,所以我们只能通过我们自己的服务器去调用微信服务器去获取用户信息,故我们将wx.login获取code 和 wx.getUserInfo 获取的encryptedData与iv 通过wx.request 请求传入后台 服务器返回的数据: 小程序代码: //调用登录接口,

  • 微信小程序如何保证每个页面都已经登陆详解

    目录 现状 解决方案 进一步解决方案 最后 现状 一个微信小程序中,有首页,有个人页面,还有一些列表页面,详情页面等等,这些页面大部分是可以分享的.当分享出去的页面被一个另一个用户打开的时候,这个页面怎么确保这个用户已经登陆了呢? 网上有很多方案是在请求封装里面加一道拦截,如果没有token,就先调用登陆请求获取token后,再继续. 这种方案没毛病,只要注意一点,当一个页面有多个请求同时触发时,当所有请求拦截后,放到一个数组里面,在获取token成功后,遍历数组一个个请求就行. 但这个需求再复

  • 微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名 比如:

  • 微信小程序获取用户信息并保存登录状态详解

    前言 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session

  • 微信小程序中的列表切换功能实例代码详解

    感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下: <!-- 标签页面标题 --> <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<

  • SpringBoot+微信小程序实现文件上传与下载功能详解

    目录 1.文件上传 1.1 后端部分 1.2 小程序前端部分 1.3 实现效果 2.文件下载 2.1 后端部分 2.2 小程序前端部分 2.3 实现效果 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 <!--文件上传与下载相关的依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fil

  • 微信小程序视图容器和基本内容组件图文详解

    目录 前言 一,视图容器类组件 1.1 view 1.2 srcoll-view 1.3 swiper和swiper-item 二,基本内容组件 2.1 text 2.2 rich-text 总结 前言 开发者可以通过运用组件快速搭建出页面结构,上一章也有对组件进行介绍,那么本文牛牛就来带大家学习小程序的组件. 我们可以将组件理解为微信内嵌的标签,它在小程序承担的作用与HTML的标签一致,不过组件的功能更加多样.具体. 事不宜迟,让我们开冲! 一,视图容器类组件 1.1 view 普通视图容器,

  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解 数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt

  • 微信小程序request请求后台接口php的实例详解

    微信小程序request请求后台接口php的实例详解 后台php接口:http://www.vueyun.com/good/info 没有处理数据,直接返回了,具体再根据返回格式处理 public function getGoodInfo(Request $request) { $goods_datas = $this->Resource->get(); return response()->json(['status' => 'success','code' => 200,

  • 微信小程序点击控件修改样式实例详解

    微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .norm

随机推荐