资讯专栏INFORMATION COLUMN

一行代码让微信小程序支持 cookie

Kosmos / 3492人阅读

摘要:一行代码让微信小程序支持,传送门微信原生的网络请求接口并不支持传统的,但有时候我们现有的后端接口确于依赖比如服务器用户登录态,这个库可用一行代码为你的小程序实现机制,以保证基于的服务会话不会失效,与端共用会话机制一行代码让小程序支持可

weapp-cookie
一行代码让微信小程序支持 cookie,传送门:github

Intro

微信原生的 wx.request 网络请求接口并不支持传统的 Cookie,但有时候我们现有的后端接口确于依赖 Cookie(比如服务器用户登录态),这个库可用一行代码为你的小程序实现 Cookie 机制,以保证基于 cookie 的服务会话不会失效,与 web 端共用会话机制

Featrues

一行代码让小程序支持 cookie

可使用 api 获取、设置 cookie

支持 domain/path 作用域

Install
npm install weapp-cookie --save

# 将 npm 包复制到 vendor 文件夹,避免小程序可能不能找到文件(tips:使用 wepy/mpvue 等框架无需此步)
cp -rf ./node_modules/ ./vendor/
Usage

在小程序根目录的 app.js 一行代码引入即可

// app.js
import "./vendor/weapp-cookie/index"

// tips: 使用 wepy/mpvue 可以直接在入口 js 引入 weapp-cookie 模块
// import "weapp-cookie"

App({
    onLaunch: function () { }
    // ...
})

原来的 wx.request 调用方式保持不变,引入后 weapp-cookie 会在底层自动代理 wx.request 的接口访问,以支持 cookie 存储和发送

// pages/home/index.js

Page({
    onLoad: function () {
        wx.request({
            url: "https://example.com/login",
            data: {
                username: "admin",
                password: "123456"
            },
            success: function (res) {
                /*
                 * 接口调用成功后 weapp-cookie 会自动保存后端发送的所有Cookie(比如:SessionID)
                 * 并在后续的所有请求中带上,以保证基于 cookie 的服务器会话机制不会失效,
                 * 实现与 web 端共用会话机制(无需再手动维护 3rd_session_key) 
                 */
            }
        })
    }
})

cookie 操作可通过 api 调用

import cookies from "weapp-cookie"

// 获取 cookie
let token = cookies.get("csrf_token", "example.com")

// 设置 cookie
let cookie = cookies.set("uid", 100, { domain: "example.com" })

// 删除 cookie
let isRemoved = cookies.remove("uid", "example.com")

// 判断是否存在 cookie
let hasToken = cookies.has("uid", "example.com")

// ... 详情请参考 Api
Api CookieStore
import cookies from "weapp-cookie"

/**
* 获取 cookie 值
* @param {String} name       cookie 名称
* @param {String} [domain]   指定域名(可选)
* @return {String}           cookie 值
*/
cookies.get(String name, String domain)

/**
* 设置 cookie
* @param {String}  name              cookie 名称
* @param {String}  value             cookie 值
* @param {Object}  options           cookie 选项
* @param {String}  options.domain    设置域名
* @param {String}  [options.path]      
* @param {Date}    [options.expires]
* @param {Number}  [options.maxAge]
* @param {Boolean} [options.httpOnly]
* @return {Cookie}           cookie 对象
*/
cookies.set(String name, String value, Object options)

/**
* 是否存在某个 cookie
* @param  {String}  name       cookie 名称
* @param  {String}  [domain]   指定域名(可选,不指定则任意域名包含名称为 name 的 cokkie 即为存在)
* @return {Boolean}            是否存在
*/
cookies.has(String name, String domain)

/**
* 删除 cookie
* @param  {Array}  name      cookie 键
* @param  {String} [domain]  指定域名(可选,不指定则删除所有域名中名称为 name 的 cookie)
* @return {Boolean}          是否删除成功
*/
cookies.remove(String name, String domain)

/**
* 获取 cookie 对象
* @param {String} name       cookie 名称
* @param {String} [domain]   指定域名(可选)
* @return {Cookie}           cookie 对象
*/
cookies.getCookie(String name, String domain)

/**
* 获取 cookies JSON对象
* @param  {String} [domain]  指定域名(可选,不指定则获取包含所有域名的 cookie 值对象)
* @return {Object}           cookie JSON对象
*/
cookies.getCookies(String domain)

/**
* 清除 cookie
* @param  {String} [domain]  指定域名(可选,不指定则清除所有域名 cookie)
* @return {Boolean}          是否清除成功
*/
cookies.clearCookies (domain)

/**
* 获取所有存储的域名和 cookies 结构
* @return {Object}   obj   结构JSON对象
*/
cookies.dir(domain)
Cookie
import cookies from "weapp-cookie"

// 获取 cookie 对象
let cookie = cookies.getCookie("uuid", "example.com")

// ===== cookie 属性 =====
cookie.name:        String
cookie.value:       String
cookie.domain:      String
cookie.path:        String
cookie.expires:     Date
cookie.maxAge:      Number
cookie.httpOnly:    Boolean

// ===== cookie 方法 =====

/**
 * 验证 cookie 是否过期
 * @return {Boolean} 是否过期
 */
cookie.isExpired()

/**
 * 验证 cookie 是否可持久化
 * @return {Boolean} 是否可持久化
 */
cookie.isPersistence()

如果对你有用,欢迎 star ^_^

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98006.html

相关文章

  • 从零开始:微信小程序新手入门宝典《一》

    摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...

    whataa 评论0 收藏0
  • 从零开始:微信小程序新手入门宝典《一》

    摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...

    mdluo 评论0 收藏0
  • 从零开始:微信小程序新手入门宝典《一》

    摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...

    LdhAndroid 评论0 收藏0
  • 信小程序todolist

    摘要:微信小程序列表页面简单的列表页面和数据添加,此时有一些问题在清除一些用户交互的页面的时候有些问题。一个微信小程序,同时只能有个网络请求连接。可能要在服务器上配置一些参数,可以让微信小程序调用基本上是没有问题的。 weixinApp 微信小程序toDoList 列表页面 简单的列表页面和数据添加,此时有一些问题 setData在清除一些用户交互的页面的时候有些问题。 inputA 是一...

    XUI 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<