精华内容
下载资源
问答
  • 小程序中实现token过期重新登录重新请求业务接口 首先还是来看下小程序官方给出的小程序登录流程: 小程序官方登录地址 小程序官方登录流程图 我们这里所说的token就是指的官方说的自定义登录态,token一般都是...

    小程序中实现token过期重新登录再重新请求业务接口

    首先还是来看下小程序官方给出的小程序登录流程:

    我们这里所说的token就是指的官方说的自定义登录态,token一般都是有时效性,按照此流程,当token失效的时候,页面在请求接口的时候服务端肯定会认为token是非法的,此时就需要小程序端重新获取新的token,然后继续接着后面的流程走。一般服务端都会给一个特定的状态码标记需要重新获取token,后面的场景我们都以服务端返回code码401认为需要去登录。

    场景1:token失效之后直接跳转到特定的一个授权登录页面

    由于getUserInfo接口变动的缘故,必须用户手动去触发一个按钮,一般都会做一个特定的授权登录页面或者弹窗,那此时在接口返回401的时候那我们直接就跳转到那个授权页面或者弹起授权登录弹窗即可,相当于是走了用户第一次进入该小程序的流程。

    这种方案是最简单的解决方案,但是缺点也很明显:打断了用户的操作流程,重复了第一次授权登录的流程,很繁琐。

    场景2:token失效之后无感知获取新token并继续之前的操作

    分2步来解决这个问题,无感知获取token

    这个其实很简单,调wx.login()获取code之后再调服务端新的接口,此接口只需要接受code返回当前登录账户最新的信息(token以及其他),拿到最新token。

    具体代码实现如下:

    http.js文件核心代码

    export class Http {
      constructor() {}
    
      request({ url, data = {}, method, header, callback = ''} = {}) {
        let _this = this;
        return new Promise((resolve, reject) => {
          wx.request({
            url,
            data,
            method,
            header: { Authorization: 'Bearer ' + storge.get(LOGIN_TOKEN) },
            callback,
            fail(res) {
              reject(res)
            },
            complete: res => {
              if (callback) return callback(res.data);
              let statusCode = res.statusCode;
              if (statusCode == 404) {
                console.log('接口不存在')
              } else if (statusCode == 401) {
               getNewToken().then(() => {
                  _this.request({ url, data, method, callback: resolve })
               })
              } else if (statusCode == 200) {
                resolve(res.data)
              } else if (statusCode.startsWith('5')) {
                wx.showModal({ content: '服务器报错,请重试!', showCancel: false });
              } 
            }
          })
        })
      }
    }
    
    // 获取token
    const getNewToken = () => {
      return new Promise((resolve, reject) => {
        wx.login({
          success(res) {
            wx.request({
              url: '获取最新token接口地址',
              method: 'POST',
              success(res) {
                let r = res.data;
                // 将所有存储到观察者数组中的请求重新执行。
                if (r.code == 0) {
                  const token = r['data']['token'];
                  wx.setStorageSyn('LOGIN_TOKEN', token);
                  resolve(res);
                }
              }
            })
          },
          fail(err) {
            reject()
            console.error('wx login fail', err);
          }
        });
      })
    }
    

    接下来看下如何使用:

    api/index.js文件部分api

    import { Http } from '../utils/http.js';
    export class Index extends Http {
      constructor() {
        super();
      }
      
      // 获取商品分类
      goodsList(data) {
        return this.request({
          url: 'goodsList',
          method: 'GET',
          data: data
        });
      }
    }
    

    pages/index/index.js文件中调用该接口,部分代码:

    import { Index } from '../../api/index.js';
    
    const API = new Index();
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {},
      
      // 获取商品列表
      getGoodList(page) {
        let param = this.data.params;
        let params = { page: page, ...param };
        return new Promise(resolve => {
          API.getGoodList(params).then(res => {
            // 业务逻辑
          })
        })
      }
      
      ...
     })
    

    如此,我们来试验一番,看到底可以不

    如图,看到在调user接口的时候发现token失效(服务端返回了401),会调issue获取最新的token,然后继续走user接口,整个过程用户无感知,而且也不会中断之前的操作,是不是很完美,答案是NO! 往下看

    遇到业务复杂的页面,会有多个请求,此时,获取最新token的这个接口就会多次调用,这个接口其实只需要调一次就可以了,这样就影响性能了,那如何对这种进行优化呢?其实方法有很多种,最简单的就是利用发布订阅模式,简单修改代码如下:

    let isRefreshing = true;
    let subscribers = [];
    
    function onAccessTokenFetched() {
      subscribers.forEach((callback) => {
        callback();
      })
      subscribers = [];
    }
    
    function addSubscriber(callback) {
      subscribers.push(callback)
    }
    
    export class Http {
      constructor() {}
    
      request({ url, data = {}, method, header, callback = ''} = {}) {
        let _this = this;
        return new Promise((resolve, reject) => {
          wx.request({
            url,
            data,
            method,
            header: { Authorization: 'Bearer ' + storge.get(LOGIN_TOKEN) },
            callback,
            fail(res) {
              reject(res)
            },
            complete: res => {
              if (callback) return callback(res.data);
              let statusCode = res.statusCode;
              if (statusCode == 404) {
                console.log('接口不存在')
              } else if (statusCode == 401) {
                
                // 将需要重新执行的接口缓存到一个队列中
               addSubscriber(() => {
                 _this.request({ url, data, method, header, callback: resolve })
               })
                
               if (isRefreshing) {
                  getNewToken(url, data).then(() => {
                    // 依次去执行缓存的接口
                    onAccessTokenFetched();
                    isRefreshing = true;
                  })
                }
                isRefreshing = false; 
              } else if (statusCode == 200) {
                resolve(res.data)
              } else if (statusCode.startsWith('5')) {
                wx.showModal({ content: '服务器报错,请重试!', showCancel: false });
              } 
            }
          })
        })
      }
    }
    
    // 获取token
    const getNewToken = () => {
      return new Promise((resolve, reject) => {
        wx.login({
          success(res) {
            wx.request({
              url: '获取最新token接口地址',
              method: 'POST',
              success(res) {
                let r = res.data;
                // 将所有存储到观察者数组中的请求重新执行。
                if (r.code == 0) {
                  const token = r['data']['token'];
                  wx.setStorageSyn('LOGIN_TOKEN', token);
                  resolve(res);
                }
              }
            })
          },
          fail(err) {
            reject()
            console.error('wx login fail', err);
          }
        });
      })
    }
    

    对,就是这么简答,把所有401的接口执行缓存到一个队列中,拿到最新token(这里使用了请求锁,只执行一次获取token的接口),接着再依次去走之前的逻辑,整个过程无感知,而且页面不管有多少个请求,始终只会调一次获取token的接口。下面来简单测试下:

    看到,issue接口只调取了一次,如此就可以完美的解决小程序中token过期重新无感知登录并重新请求之前所有的接口。

    展开全文
  • 由于网上有太多篇关于小程序登录的坑人博文,造成视觉误导,本人已经吃亏,为了防止更多人被误导,本篇博文就来讲讲认证注册成功小程序之后,怎么正确登录小程序的管理后台。申请微信小程序并认证的步骤参见三掌柜...

           由于网上有太多篇关于小程序登录的坑人博文,造成视觉误导,本人已经吃亏,为了防止更多人被误导,本篇博文就来讲讲认证注册成功小程序之后,怎么正确登录到小程序的管理后台。申请微信小程序并认证的步骤参见三掌柜发布的名为“微信小程序:微信公众号申请微信小程序并认证的步骤”这篇文章,这里只介绍怎么正确登录到微信小程序管理后台界面。

            发现一个问题,之所以被误导就是因为没有正确登录账号,小程序的账号和微信公众平台的账号不一样,要分清楚账号问题,那就没事了。

    一、首先来看小程序的注册页面

          1、先用微信公众号账号,登录微信公众平台;

          2、如果之前到现在还没注册小程序,会看到如下界面;

    二、点击快速注册并认证小程

    展开全文
  • 在微信(或企业微信)中登录小程序,可以分为两种: 第一种是使用微信授权登录, 第二种使用账号密码登录(如某些非开放的系统); 一、使用微信登录小程序 微信中调用wx.login()(企业微信中调用wx.qy.login())...

    在微信(或企业微信)中登录小程序,可以分为两种:
    第一种是使用微信授权登录,
    第二种使用账号密码登录(如某些非开放的系统);

    一、使用微信登录小程序
    微信中调用wx.login()(企业微信中调用wx.qy.login())获取临时登录凭证code,然后调用wx.request调用开发者后台接口,将code传给后台;后台调用auth.code2Session,使用code换取openid和session_key等信息(企业微信为 session_key、用户userid以及用户所在企业的corpid等信息),后台生成与openid和session_key(企业微信为userid和session_key)关联的token,并将token下发给前端。前端将token存入storage中,请求后台接口的时候在请求头中带上token,后台验证token通过后,返回业务数据给前端。

    二、使用账号密码登录
    输入账号密码请求后台登录接口,后台返回token,前端将token存入storage中,请求后台接口的时候在请求头中带上toaken,后台 验证token通过后,返回业务数据给前端。

    三、获取用户信息
    调用 wx.getUserInfo()可以获取用户信息,但需要用户授权。

    展开全文
  • 新注册的小程序,第二天登录怎么登录不进去后台! ???怎么办, 原因很简单,是你自己搞错了登录账号!!! 小程序登录完整流程 第一步,登录微信公众平台地址,注意小程序登录地址同公众号登录是一个地址...

    新注册的小程序,第二天登录,怎么也登录不进去后台!

    ???怎么办,

    原因很简单,是你自己搞错了登录账号!!!

    小程序登录完整流程

    第一步,登录微信公众平台地址,注意小程序登录地址同公众号登录是一个地址,地址为:https://mp.weixin.qq.com/

    第二步,最保险的方法是选择扫码登录,用小程序管理员的微信扫描二维码,扫码后选择对应的小程序登录,就可以进入小程序后台了。

    你还可以选择输入小程序账号密码登录,验证密码正确后,进入管理员确认,如图,注意:小程序的账号和密码和你的公众号账号和密码不一样!千万不要搞混。

    第三步,通过管理员微信账号扫二维码登录,扫码后弹出确认框,如图

    第四步,确认登录,弹出成功登录提示,如图


    第五步,手机上确认登录后,电脑PC上直接登录进入小程序首页(如图),接下来你就可以在小程序后台进行小程序的配置与版本的更新处理了。

    展开全文
  • ASP。NET登录小程序

    2008-10-14 11:26:21
    A简单易学 SP。NET登录小程序ASP。NET登录小程序ASP。NET登录小程序ASP。NET登录小程序
  • 小程序授权登录

    千次阅读 2018-10-16 18:22:56
    1,由于公司需要,现在需要做一个小程序,在授权登录的地方遇到很操蛋的问题! 无论当我点击授权登录按钮时,授权弹框就是不弹出来,让我纠结半天 注:4月30日之前已经正式发布的小程序,还是可以按照用户登录时,...
  • )时,需要拉起小程序授权登录,在没有单独登录页的情况下(为了方便可以让产品&UI出一个单独的登录页),封装一下小程序授权登录就比较方便了。 1、组件编写 新建Component => author author.wxml: &...
  • 微信小程序版的登录注册

    万次阅读 多人点赞 2018-07-06 12:31:14
    使用微信小程序进行用户的登陆注册功能 使用了weui进行 1、登录界面展示: 2、注册界面展示 3、代码列表展示: 4、核心功能 (1)用户名密码错误: (2)登录是按照用户登录名来查找的,...
  • 微信小程序用户登录登录态维护

    万次阅读 多人点赞 2020-07-22 11:11:10
    让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情。我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态。 在微信小程序中,...
  • 微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进行...
  • 微信小程序登录流程

    千次阅读 2019-06-02 22:15:54
    小程序是在微信的基础上,使用微信的个人基础信息作为账号登录,因此,在登录流程以及实现上,小程序与一般的网站有所不同。这篇博客用来记录我的小程序登录流程及实现。 先简单描述一下登录流程 1.小程序端...
  • 微信小程序登录demo

    2018-06-01 12:01:47
    一款微信小程序的小demo,支持一段时间免密登录,定时清除当前用户的登录信息,安全性有保障,且代码应用场景广泛,可套用,附完整源码
  • 最近微信接口升级导致人人商城小程序授权登录失败,用户无法登录(已经上线的小程序不受影响,但是如果修改再审核的话,也需要更新接口)。 经过几天的研究终于搞定了。 需要把原来的getUserinfo接口升级到新的...
  • 小程序授权登录问题

    千次阅读 2018-10-24 16:10:06
    最近公司让做小程序,我们的小程序是一个购物类的,需要用户登录才能下单购买,所以涉及到了小程序的授权登录问题,偏偏小程序的接口调整 在用户未授权过的情况下调用userInfo和authorize,将不再出现授权弹窗,会...
  • 微信小程序Java登录流程

    万次阅读 多人点赞 2018-05-10 15:05:04
    一、登录流程图二、微信小程序端doLogin:function(callback = () =>{}){ let that = this; wx.login({ success:function(loginRes){ if(loginRes){ //获取用户信息 wx.getUserInfo({ withCredentials:...
  • 微信小程序之授权登录(附完整源码)

    万次阅读 多人点赞 2018-03-21 10:38:05
    个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:... 微信小程序之授权登录 一、前言 由于微信官方修改了 getUserIn...
  • 微信小程序登录功能实现

    千次阅读 2019-08-09 11:00:23
    微信小程序登录功能实现记录
  • 微信小程序登录 php后台

    万次阅读 2019-08-26 11:02:38
    微信小程序登录以及获取openid(用户唯一标识)和session_key 一、前端登录代码: //登录获取code login:function(){ wx.login({ success:function(res){ console.log(res.code) //发送请求 wx.request({ .....
  • 主要介绍了微信小程序登录session的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 小程序自动登录实现

    千次阅读 2018-08-18 14:58:08
    微信小程序登录 第一步:获取登录态code 微信登陆部分,首先需要使用微信小程序的api—— wx.login(OBJECT)来获取登录态 这个登陆态的作用是为了获取用户的openid(用户的唯一标识); 相关链接:...
  • 微信小程序实现登录

    千次阅读 2019-02-07 18:44:29
    (感觉小程序登录相对于企业微信登录简单一点) 话不多说 上代码: 在微信小程序端发起登录   -------------------------------------------------微信小程序端--------------------------------------...
  • 写这篇文章,主要是因为前阵子(其实就是一两周前)被大佬要求画出授权时序图,然后我不出意外被教训了一顿,哈哈,...根据是否过期去判断是否需要重新登录小程序。sessionId怎么来的呢?是根据小程序getAccessToke...
  • 文章目录小程序登录代码1、小程序登录的wxml代码2、小程序登录的wxss代码3、小程序js代码注册后端代码1、UserService的登录接口2、UserServiceImpl实现类3、controller代码 小程序登录代码 1、小程序登录的wxml...
  • 主要介绍了微信小程序 如何保持登录状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序登录流程图

    千次阅读 2019-05-15 10:41:53
    一、微信小程序官方登录流程图: 二、具体理解 微信小程序客户端(小程序前端) 第三方服务器端(小程序后端) 微信服务器端(微信官方api) 1、客户端获得code值,并将code传给第三方服务端 微信小程序...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序实现微信登录(Java后台)

    万次阅读 多人点赞 2018-12-13 19:51:38
    这两天在自己的小项目中加入了微信小程序的很多功能,今天来说一下关于微信授权登录的部分。 需要的材料 1:一个可以测试的微信小程序 2:此微信小程序的APPID和APPscret 流程 微信用户对应一个小程序都有一个...
  • 微信小程序云数据库实现登录

    千次阅读 热门讨论 2019-04-14 17:49:53
    微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库 云数据库配置: 假设环境ID:abss 数据库名为:abc 微信小程序自带的云数据库可以生成登录注册系统,以下是简单实现功能的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 464,878
精华内容 185,951
关键字:

怎样重新登录小程序