微信小程序 如何保持登录状态

问题

由于wx.request()发起的每次请求对于服务器来说都是不同的会话（wx.request()请求是先经过微信服务器再到达我们的服务器），这样会导致后续请求都相当于未登录的状态。

解决方案

将登陆时后端返回的session保存在本地，

然后将session存放在cookie中以请求头的方式带回给服务端

实现代码

1.请求登陆接口获取到header["Set-Cookie"]，并储存

//app.js
App({
 onLaunch() {
  wx.login({ // 登录
   // 发送 res.code 到后台换取 openId, sessionKey, unionId
   success: res => {
    wx.request({
     url: 'api/login',
     method: 'POST',
     data: {
      code: res.code
     },
     success(res) {
      //必须先清除，否则res.header['Set-Cookie']会报错
      wx.removeStorageSync('sessionid') ;
      //储存res.header['Set-Cookie']
      wx.setStorageSync("sessionid", res.header["Set-Cookie"]) ;
     }
    });
   }
  });
 }
})

2.后续接口将储存的sessionid放在cookie中以请求头的方式带回给服务端

//index.js
Page({
 onLoad(options) {
  wx.request({
   url: api + '/list',
   method: 'GET',
   header: { //将sessionid放在cookie中以请求头的方式带回给服务端
    'cookie': wx.getStorageSync("sessionid")
   },
   success(res) {
    console.log(res);
   }
  })
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序获取手机网络状态的方法【附源码下载】

    微信小程序获取手机网络状态的方法【附源码下载】

    本文实例讲述了微信小程序获取手机网络状态的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>手机网络状态:{{netWorkType}}</view> index.js逻辑文件代码 Page({ data: { netWorkType:'' }, onLoad: function () { var that=this wx.getNetworkType({ success: function(res) { that.s

  • 详解小程序用户登录状态检查与更新实例

    这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态? 将这个部分单独作为一篇文章有两个原因: ① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法: ② 上篇文章授权.登录.session_key.unionId只梳理了登录流程而没有贴实际的代码,所以这篇文章以代码实现为主. 1. 代码逻辑

  • 使用watch在微信小程序中实现全局状态共享

    问题 在之前开发微信小程序的时候,获取用户信息.openid还有地理位置这些信息的时候,都是采用Promise的方式异步获取,但是这样的话在页面和App.js中都获取就可能造成请求重复的问题. 比如为了在每个页面都能获取到这些共享信息,都会选择在App.js中进行获取,然后在页面级进行获取,这两次获取的时间间隔较小时就可能导致前一个请求还未获取到数据,后一个请求就会再次进行获取,这样就产生了两次请求. 还有一个问题就是书写麻烦(虽然也能通过async await简化),比如 onLoad() {

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

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

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

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

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

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

  • 微信小程序 检查接口状态实例详解

    微信小程序 检查接口状态实例详解 实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()

  • 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

    本文实例讲述了微信小程序实现动态设置placeholder提示文字及按钮选中取消状态的方法.分享给大家供大家参考,具体如下: 效果图展示    通过绑定点击事件placeholder方法,获取data-num的值,通过js判断num等于几,然后通过class="{{num==X?'active':''}}"表达式判断哪个标签处于选中状态(即蓝底白字): js通过获取data-key,设置input输入框中placeholder的动态值 wxml里的内容: <view class=

  • 微信小程序 如何保持登录状态

    问题 由于wx.request()发起的每次请求对于服务器来说都是不同的会话(wx.request()请求是先经过微信服务器再到达我们的服务器),这样会导致后续请求都相当于未登录的状态. 解决方案 将登陆时后端返回的session保存在本地, 然后将session存放在cookie中以请求头的方式带回给服务端 实现代码 1.请求登陆接口获取到header["Set-Cookie"],并储存 //app.js App({ onLaunch() { wx.login({ // 登录 //

  • 微信小程序开发一键登录 获取session_key和openid实例

    微信小程序开发一键登录 获取session_key和openid实例

    微信小程序开发一键登录 获取session_key和openid实例 思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz'

  • 微信小程序实现注册登录功能(表单校验、错误提示)

    微信小程序实现注册登录功能(表单校验、错误提示)

    口说无凭,实现效果如下 前端 部分 注册功能 1.wxml文件 <view> <view class="frm"> <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"> <view class="ui-col ui-col-border-right

  • 微信小程序实现用户登录模块服务器搭建

    我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置 初始化项目,将会自动创建package.json配置文件. npm init -y 安装Express框架和request模块. npm install express –save npm install request --save 安装nodemon监控文件修改(如果已经安装则跳过此步). npm install nodemon -g 代码编写 执行上述命令后,在项目目录下创建app

  • 微信小程序手机号验证码登录的项目实现

    微信小程序手机号验证码登录的项目实现

    本文主要介绍了小程序手机号验证码登录,具体如下: wxml: <view class="content_bottom"> <form bindsubmit="formSubmit"> <view class="field"> <label for="phone">手机号</label> <input class="int" name=&quo

  • 微信小程序自定义用户登录弹窗

    微信小程序自定义用户登录弹窗

    本文实例为大家分享了微信小程序自定义用户登录弹窗的具体代码,供大家参考,具体内容如下 view <button   class="btn" bindtap="powerDrawer" data-statu="open">立即进入</button> <!--mask:弹出框--> <view class="drawer_screen" bindtap="powerDrawer&

  • 微信小程序实现手机号登录

    微信小程序实现手机号登录

    本文实例为大家分享了微信小程序实现手机号登录的具体代码,供大家参考,具体内容如下 1.wxml <form bindsubmit="formsubmit">   <view>手机号<input type="text" placeholder="请输入手机号" bindinput="getphone" name="phone"/></view>   <vi

  • 一文教会你微信小程序如何实现登录

    目录 业务流程: 下面开始用代码介绍 1:data初始数据 2:按钮触发的login点击事件 3:调用后台的登录接口 总结 业务流程: 1:首先需要一个按钮触发事件 2:调用微信小程序的登录接口wx.login,拿到code 3:调用微信小程序的获取用户信息的接口wx.getUserProfile,拿到用户的个人信息 4:拿到的个人信息调用后台的接口,把个人信息传给后台,登录成功并把相关信息存储在本地的缓存中,方便之后的开发使用 下面开始用代码介绍 wxml: <view> <butto

  • 微信小程序MoxB实现全局状态管理流程详解

    目录 安装 MobX 创建 MobX Store 使用 MobX Store 在 Component 构造器中使用 在 Page 页面中使用 github 地址:https://github.com/wechat-miniprogram/mobx-miniprogram-bindings. 安装 MobX 在小程序根目录下执行 npm install --save mobx-miniprogram mobx-miniprogram-bindings 安装 mobx-miniprogram 和 m

随机推荐