当前位置：首页 > news >正文

中后台项目中的数据脱敏显示组件：Naive Ui Admin封装

news 2026/5/13 5:31:11

中后台项目中的数据脱敏显示组件：Naive Ui Admin封装

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

在企业级中后台系统开发中，数据安全与隐私保护是至关重要的环节。Naive Ui Admin作为基于Vue3、Vite2和TypeScript的中后台解决方案，提供了完善的数据脱敏显示功能，帮助开发者轻松实现敏感信息的安全展示。本文将详细介绍Naive Ui Admin中数据脱敏组件的设计思路、使用方法及最佳实践。

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

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

用户手机号显示为138****5678
身份证号显示为110********1234
银行卡号显示为**** **** **** 5678

这些处理既满足了业务展示需求，又有效防止了敏感信息泄露。Naive Ui Admin通过组件化方式将脱敏逻辑封装，使开发者可以开箱即用。

Naive Ui Admin脱敏组件的实现方式

Naive Ui Admin的脱敏功能主要通过工具函数与表格组件结合实现。在项目中，脱敏相关的逻辑通常集中在数据格式化工具中，例如src/utils/index.ts文件中可能包含类似以下的脱敏函数：

// 手机号脱敏示例 export const formatPhone = (phone: string) => { if (!phone) return ''; return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2'); }; // 身份证号脱敏示例 export const formatIdCard = (idCard: string) => { if (!idCard) return ''; return idCard.replace(/^(\d{6})\d{8}(\d{4})$/, '$1********$2'); };

这些工具函数可以直接在表格列定义中使用，例如在src/views/system/role/columns.ts中配置表格列时：

const columns = [ // 其他列定义... { title: '联系电话', key: 'phone', render: (row) => formatPhone(row.phone) }, { title: '身份证号', key: 'idCard', render: (row) => formatIdCard(row.idCard) } ];

如何在项目中使用脱敏组件

使用Naive Ui Admin的脱敏功能非常简单，只需三个步骤：

1. 引入脱敏工具函数

首先在需要使用脱敏功能的组件中引入相关工具函数：

import { formatPhone, formatIdCard } from '@/utils/index';

2. 在表格中应用

在表格列定义中使用render函数调用脱敏方法：

<template> <BasicTable :columns="columns" :dataSource="data" /> </template> <script setup lang="ts"> const columns = [ { title: '用户姓名', key: 'name', }, { title: '联系电话', key: 'phone', render: (row) => formatPhone(row.phone) } ]; </script>

3. 自定义脱敏规则

如果系统提供的脱敏规则不能满足需求，可以在src/utils/index.ts中扩展自定义脱敏函数：

// 自定义邮箱脱敏 export const formatEmail = (email: string) => { if (!email) return ''; const [name, domain] = email.split('@'); return name.substring(0, 3) + '***@' + domain; };