Mew

Install

npm i @bbg/mew

Usage

pc 或 h5 登录

先联系管理员将业务域名加入 sso 白名单，否则无法通过授权

先创建 Auth 实例，比如在 service/common.service.ts 里导出实例，方便复用单一实例

export const auth = new Auth({
  env: ENV,
  source: SOURCE,
  source_appid: string, // 来源业务公众号appid，没有就不用带
})

H5 项目中，在 http.ts 里，401 时，使用 Auth 实例去登录

import { commonService } = '_service'

commonService.auth.toSignInWxH5()

同理，pc 登录

import { commonService } = '_service'

commonService.auth.toSignInPC()

因为登录后的回调中会携带加密 token，所以需要在全局处理解密 token，比如可以在 src/index.ts 里加入

import { Auth } = '@bbg/mew'

Auth.decodeSsoToken()

会自动识别链接上的参数，并存 token 到本地，注意，这个方法是静态方法，无需实例化

跨域无感知授权

比如我要在购买页 https://shop.haha.com 免登录跳到 https://pay.haha.com

Auth.toUrlWithTicket({ url: 'https://pay.haha.com' })

注意：目标域项目 https://pay.haha.com 依然需要在全局使用 Auth.decodeSsoToken() 来全局解码

本地存储和发布订阅

初始化，可以放在 src/lib/storage.ts

import { Storage } = '@bbg/mew'
// 定义 storage key，防止重复，便于智能提示
import { storageType } = '_src/type/storage'

const storage = new Storage<storageType.Key>()

export default storage

src/type/storage.ts 可以定义storage的key

export type Key =
  | 'haha'
  | 'uid'

业务代码里就可以这样用，具体看下面的API

import { storage } from '_lib/storage'

storage.setItem('haha', { xixi: 123 })
console.log(storage.getItem('haha')) // { xixi: 123 }

API

或直接查看ts声明文件获得最准确的API

Auth

import { Auth } from '@bbg/mew

/**
 * 实例化
 */
const auth = new Auth(params: {
  env: 'dev' | 'stage' | 'prod' // 当前环境
  source: string // 来源业务标识，需要和后端确定
  source_appid?: string // 来源业务公众号appid
})

/**
 * wx h5登录，会跳转授权，成功后回调到ref上
 * @param params.ref 登录成功后的回调url
 */
auth.toSignInWxH5(
  (params: {
    ref?: string,
  } = {}),
)

/**
 * pc登录
 * @param params.ref 登录成功后的回调url
 */
auth.toSignInPC(
  (params: {
    ref?: string,
  } = {}),
)

/**
 * 退出登录
 * @param ref 回调链接（可选，默认为当前链接）
 */
  public signOut(params: { ref?: string } = {})

/**
 * 从地址栏上解出token，并存入本地，此方法可以在全局挂上
 * params.currentUrl? 需要解析的地址，默认为当前地址
 * params.isKeepTokenInUrl? 是否需要保留sso_token在url上，默认会去除掉
 */
static decodeSsoToken(
  params: {
    currentUrl?: string
    isKeepTokenInUrl?: boolean
  }
)

/**
 * 把token ticket 带在一个链接上，然后跳过去
 * @param params.url 跳过去的链接
 * @param params?.token 需要加密的token，不填默认取本地token
 * @param params?.isReplace 跳过去是否replace当前页面，默认location.assign
 */
static toUrlWithTicket(params: { url: string; token?: string, isReplace: boolean })

Storage

类

// 创建实例，TKey是 union type
new Storage<TKey extends string>()

实例

/**
 * 本地存储获取一个值，如果是数字字面量，一定是 number，因为基于 JSON.parse
 */
getItem<T = string>(key: TKey): T | null;

/**
 * 本地存储设置一个值，value可以是对象
 */
setItem(key: TKey, value: {
    [key: string]: any;
} | string | number): void;

/**
 * 清空localstorage
 */
clear(): void;

/**
 * 本地会话存储获取一个值，如果是数字字面量，一定是 number，因为基于 JSON.parse
 */
getSessionItem<T = string>(key: TKey): T | null;

/**
 * 本地会话存储设置一个值，value可以是一个值
 */
setSessionItem(key: TKey, value: unknown): void;

/**
 * 清空sessionStorage
 */
sessionClear(): void;

/**
 * 在内存设 kv
 */
set(key: TKey, value: any): void;

/**
 * 在内存获取 kv
 */
get<T = string>(key: TKey): T | null;

/**
 * 在内存移除 kv
 */
remove(key: TKey): void;

/**
 * 本地存储移除一个值
 */
removeItem(key: TKey): void;

/**
 * 本地会话存储移除一个值
 */
removeSessionItem(key: TKey): void;

/**
 * 监听事件
 * @param key 要监听的事件名
 * @param callback 监听回调
 */
on(key: TKey, callback: (params: CustomEventInit) => void): void;

/**
 * 发射事件
 * @param key 要发射的事件名
 * @param eventInit 事件参数
 * @param eventInit.detail 携带的数据
 * @param eventInit.bubbles bubbles 是否可以冒泡
 * @param eventInit.cancelable cancelable 是否可以取消
 */
emit(key: TKey, eventInit?: CustomEventInit): void;

Dev

监听开发模式

npm start

构建并测试

npm run build