当前位置：首页 > VUE

vue操作日志实现

2026-01-16 07:29:27VUE

Vue 操作日志实现方案

方案一：基于拦截器的前端日志记录

通过封装 Axios 请求拦截器和响应拦截器，自动记录用户操作。这种方式适合记录 API 调用相关的操作。

// 在 axios 拦截器中添加日志记录
axios.interceptors.request.use(config => {
  if (config.method !== 'get') {
    const action = `${config.method.toUpperCase()} ${config.url}`
    store.dispatch('log/addLog', {
      action,
      data: config.data || {},
      timestamp: new Date().toISOString()
    })
  }
  return config
})

方案二：自定义指令记录 DOM 操作

对于重要的按钮点击或表单操作，可以通过 Vue 自定义指令来记录。

Vue.directive('log', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const logEntry = {
        action: binding.value || el.innerText,
        component: el.__vue__.$options.name,
        timestamp: new Date()
      }
      console.log('操作日志:', logEntry)
      // 发送到日志服务
    })
  }
})

方案三：全局混入记录组件生命周期

通过 Vue.mixin 记录组件的创建和销毁信息。

Vue.mixin({
  created() {
    if (this.$options.logName) {
      console.log(`组件 ${this.$options.logName} 被创建`)
    }
  },
  destroyed() {
    if (this.$options.logName) {
      console.log(`组件 ${this.$options.logName} 被销毁`)
    }
  }
})

方案四：路由守卫记录导航

使用 Vue Router 的导航守卫记录页面访问情况。

router.beforeEach((to, from, next) => {
  store.dispatch('log/addNavigationLog', {
    from: from.path,
    to: to.path,
    time: new Date()
  })
  next()
})

日志存储方案

本地存储：使用 localStorage 或 IndexedDB 临时存储日志
服务端存储：定期批量发送日志到后端 API
实时推送：使用 WebSocket 实时发送重要操作日志

日志数据结构示例

{
  id: 'uuid',
  userId: 'user123',
  action: 'delete_item',
  component: 'ItemList',
  params: { itemId: 456 },
  status: 'success',
  timestamp: '2023-01-01T12:00:00Z',
  userAgent: navigator.userAgent,
  ipAddress: '' // 通常由后端获取
}

注意事项