vue操作日志实现
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: '' // 通常由后端获取
}注意事项
- 敏感数据不应记录在日志中
- 考虑添加日志级别区分（info, warning, error）
- 生产环境应考虑日志采样率避免性能问题
- 用户隐私需符合 GDPR 等法规要求
扩展功能
- 日志搜索和过滤功能
- 操作回放功能
- 异常操作报警机制
- 用户行为分析报表
以上方案可根据实际需求组合使用，构建完整的操作日志系统。
