中后台项目中的数据脱敏前端实现：Naive Ui Admin函数

【免费下载链接】naive-ui-admin Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。 项目地址: https://gitcode.com/gh_mirrors/na/naive-ui-admin

在当今数据驱动的时代，中后台系统常常需要处理大量敏感信息，如用户手机号、身份证号、银行卡号等。数据脱敏作为保护用户隐私的关键环节，在前端开发中扮演着越来越重要的角色。Naive Ui Admin作为基于Vue3、Vite2和TypeScript的中后台解决方案，提供了多种灵活的数据脱敏实现方式，帮助开发者快速构建安全可靠的企业级应用。

数据脱敏的重要性与应用场景

数据脱敏是指对敏感信息进行部分隐藏或替换，在不影响数据可用性的前提下保护用户隐私。在中后台系统中，常见的脱敏场景包括：

• 用户列表中的手机号显示（如：138****5678）
• 订单管理中的银行卡号隐藏（如：**** **** **** 1234）
• 个人中心的身份证号部分遮蔽（如：3****************X）
• 日志系统中的敏感参数过滤

Naive Ui Admin中的数据脱敏实现方法

1. 自定义脱敏函数实现

虽然Naive Ui Admin没有内置专门的脱敏工具函数，但我们可以利用其灵活的组件系统和工具函数，轻松实现各种脱敏需求。以下是几种常用的脱敏函数实现：

// 手机号脱敏：保留前3位和后4位
export function maskPhone(phone: string): string {
  if (!phone) return '';
  return phone.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2');
}

// 身份证号脱敏：保留前1位和后1位
export function maskIdCard(idCard: string): string {
  if (!idCard) return '';
  return idCard.replace(/^(\d{1})\d*(\d{1})$/, '$1****************$2');
}

// 银行卡号脱敏：保留最后4位
export function maskBankCard(cardNumber: string): string {
  if (!cardNumber) return '';
  return '**** **** **** ' + cardNumber.slice(-4);
}

这些函数可以放在src/utils/index.ts文件中，方便全局调用。

2. 结合Table组件实现表格数据脱敏

Naive Ui Admin的Table组件提供了灵活的列配置，可以在渲染数据时直接应用脱敏函数：

// 表格列配置示例
const columns = [
  {
    title: '手机号',
    key: 'phone',
    render: (row) => maskPhone(row.phone)
  },
  {
    title: '身份证号',
    key: 'idCard',
    render: (row) => maskIdCard(row.idCard)
  },
  {
    title: '银行卡号',
    key: 'bankCard',
    render: (row) => maskBankCard(row.bankCard)
  }
];

这种方式适用于src/views/list/basicList/index.vue等列表页面，确保敏感数据在展示时自动脱敏。

3. 利用Form组件实现表单数据脱敏

在表单展示和编辑时，可以使用Naive Ui Admin的Form组件结合自定义脱敏函数：

<template>
  <BasicForm :model="formData" :schemas="schemas" />
</template>

<script setup>
const schemas = [
  {
    field: 'phone',
    label: '手机号',
    component: 'Input',
    rules: [{ required: true, message: '请输入手机号' }],
    renderComponentContent: (renderProps) => {
      return h('span', null, maskPhone(renderProps.value));
    }
  }
];
</script>

相关实现可以参考src/components/Form/src/BasicForm.vue组件。

数据脱敏的最佳实践

1. 统一管理脱敏规则

建议在src/utils/index.ts中集中管理所有脱敏函数，便于维护和统一修改：

// src/utils/index.ts
export const DesensitizeUtils = {
  phone: (val: string) => val.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2'),
  idCard: (val: string) => val.replace(/^(\d{1})\d*(\d{1})$/, '$1****************$2'),
  bankCard: (val: string) => '**** **** **** ' + val.slice(-4),
  // 其他脱敏规则...
};

2. 根据权限动态脱敏

结合Naive Ui Admin的权限控制功能，可以根据用户角色动态决定是否脱敏：

// src/hooks/web/usePermission.ts
import { usePermission } from '@/hooks/web/usePermission';

export function useDesensitize() {
  const { hasPermission } = usePermission();
  
  const desensitizePhone = (phone: string) => {
    if (hasPermission('see:full-phone')) {
      return phone;
    }
    return DesensitizeUtils.phone(phone);
  };
  
  return { desensitizePhone };
}

3. 脱敏与数据验证结合

在src/components/Form/src/hooks/useForm.ts中，可以将脱敏与表单验证结合，确保原始数据的准确性：

// 表单提交前处理
const handleSubmit = () => {
  // 先验证原始数据
  validateForm();
  // 脱敏后提交展示数据
  const displayData = {
    ...formData,
    phone: DesensitizeUtils.phone(formData.phone),
    idCard: DesensitizeUtils.idCard(formData.idCard)
  };
  submit(displayData);
};

总结

数据脱敏是中后台系统开发中不可或缺的一环，Naive Ui Admin通过其灵活的组件设计和工具函数，为开发者提供了便捷的脱敏实现方案。无论是简单的字符串替换还是复杂的权限动态脱敏，都可以在Naive Ui Admin框架下高效实现。通过合理使用脱敏技术，我们可以在保护用户隐私的同时，确保系统功能的完整性和数据的可用性。

建议开发者在实际项目中，根据具体业务需求选择合适的脱敏策略，并结合Naive Ui Admin的权限系统，实现更加精细化的数据访问控制。更多关于组件使用的细节，可以参考项目中的src/components/Table/和src/components/Form/目录下的实现。

【免费下载链接】naive-ui-admin Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。 项目地址: https://gitcode.com/gh_mirrors/na/naive-ui-admin