不能依赖 vue.filter('ipmask') 跨端使用,因小程序和 app 端不执行过滤器,仅 h5 有效;应封装纯函数 ipmask 并显式调用或配合 computed 使用,确保容错、类型判断及全端一致。

直接用过滤器对 IP 地址做「隐藏最后一段」不安全,也容易出错——因为 v-if、v-for 中的 IP 若含空格或非法格式,| ipMask 会返回 undefined 或报错;更关键的是,**过滤器在小程序和 App 端根本不会执行**,只在 H5 有效。
为什么不能依赖 Vue.filter('ipMask', ...) 跨端使用
uni-app 编译到微信/支付宝小程序或 App 时,模板里的 | 管道语法被完全忽略,{{ ip | ipMask }} 就原样输出原始 IP,毫无脱敏效果。这不是你写错了,是平台机制决定的。常见现象包括:
- 微信开发者工具里显示
192.168.1.100,而不是192.168.1.* - 真机调试时控制台无报错,但页面没变化
- H5 正常,其他端全失效,且无法统一兜底
正确做法:封装纯函数 + 显式调用或 computed
把逻辑抽成工具函数,所有端都能用,还能加类型判断和容错。例如在 @/utils/ip.js 中:
export const ipMask = (ip) => {
if (!ip || typeof ip !== 'string') return ''
const parts = ip.trim().split('.')
if (parts.length !== 4) return ip // 非标准 IPv4 直接原样返回
return `${parts[0]}.${parts[1]}.${parts[2]}.*`
}
在页面中使用方式(Vue 3 setup):
- 显式调用:
const maskedIp = ipMask(userInfo.ip) - 配合
computed响应式更新:const displayIp = computed(() => ipMask(props.ip)) - 模板中直接写:
{{ ipMask(item.ip) }}(需先import { ipMask } from '@/utils/ip')
IP 脱敏要防哪些坑
真实场景中 IP 字段可能来自接口、本地缓存或用户输入,不能假设它永远是干净的 4 段数字:
- 带空格或换行:
" 10.0.0.1\n"→ 必须trim() - IPv6 地址:
"2001:db8::1"→ 不该走 IPv4 脱敏逻辑,建议先判断格式或加前缀校验 - 字段为空或为
null:ipMask(null)必须返回空字符串,不能抛错 - 后端返回的是对象嵌套:
res.data.network.ip,模板里写{{ item.network?.ip | ipMask }}会因?.ip在过滤器前未解析而报错,应改用{{ ipMask(item.network?.ip) }}
最易被忽略的一点:**别在 onLoad 或 onShow 里反复调用 ipMask 去修改原始数据**。它只是展示层转换,原始 IP 必须保持可读、可上报、可调试——脱敏只发生在渲染那一刻。











