@hzkj/web-tracking v1.0.4

Hanzi Web Tracking Plguin

// 全局环境参数集合
type LogEnv = {
  /** 环境属性 */
  app_name: string
  // 客户端版本号
  app_version: string
  // 服务端版本号
  api_version: string
  // 当前环境
  environment: string
  // 用户ID
  uid: string
  // 用户名称
  nick_name: string
  // 用户登录token
  session: string
  // 系统
  system: string
}

// 配置参数
type Options = {
  // aliyun sls 配置
  sls: {
    host: string
    project: string
    logstore: string
  }
  // 接口白名单
  ignores?: string[]
}

type Router = VueRouter

// 用于存储和获取全局参数
interface Store {
  state: LogEnv
  get(): LogEnv
  set(v: LogEnv): void
}

使用方法

一、注册插件

import { WebTracking } from '@hzkj/web-tracking'

// vue 3.x
app.use(WebTracking, { options, router })

// vue 2.x
Vue.use(WebTracking, { options, router })

二、全局环境参数存入

import { WebTrackingStore } from '@hzkj/web-tracking'

const wtstore = new WebTrackingStore()
wtstore.set({ ... })

三、处理路由日志

// main.js
import router from '...'

// vue 3.x
app.use(router)
app.use(WebTracking, { options, router })
app.mount(...)

// vue 2.x
Vue.use(WebTracking, { options, router })
new Vue({ router })

四、处理接口日志

// 在 request.js 中，注入拦截器

import { WebTracking } from '@hzkj/web-tracking'

const service = axios.create({...})
// 放置在别的拦截器之前
WebTracking.withInterceptor(service)

service.interceptors.request.use(...)