一行程式碼讓微信、頭條、百度、支付寶小程式支援 cookie

CharlesLo發表於2018-07-24
行程Cookie

weapp-cookie

一行程式碼讓微信、頭條、百度、支付寶小程式支援 cookie，傳送門：github

weapp-cookie

Intro

小程式原生的 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

複製程式碼

使用和配置別名：由於微信小程式的安全機制，在小程式外掛環境下 wx.request 不允許被重寫，所以需使用內建別名或自定義別名來支援 cookie 請求

import cookies from 'weapp-cookie'

// 使用內建別名
wx.requestWithCookie({
    url: 'https://example.com/user/current',
    success: function (res) {
        console.log(res)
    }
})

// 配置自定義別名
cookies.config({ requestAlias: 'requestx' })

// 使用自定義別名
wx.requestx({
    url: 'https://example.com/user/current',
    success: function (res) {
        console.log(res)
    }
})
複製程式碼

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

如果對你有用，歡迎 star ^_^

相關文章