敏感信息脱敏处理

原创已于 2022-12-16 15:44:00 修改 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

于 2022-12-16 15:40:04 首次发布

本文介绍如何使用Ant Design Pro Table组件实现表格数据展示，并通过React Hooks管理状态，包括如何实现身份证号的部分脱敏及点击显示完整号码的功能。

import { ProTable } from '@ant-design/pro-table'
import { useState, useEffect, useRef } from 'react'
import pageService from './service'
export default (props) => {
//截取前后两位，slice(0，2)取前不取后，取到0和1两位
//splice(0，2)取后不取前，取到1-2位
//const desensitization = (str) => {
 // console.log(str)
  //截取前后两位
  //如果长度小于两位则显示全部
//  if (!str || (str && str.length < 3)) {
//return str
 // } else {
  //  return `${str.slice(0, 2)}**${str.slice(str.length - //3, str.length - 1`}}
  const actionRef:any = useRef()
  //表格配置
  const [config, setConfig] = useState(initTableConfig) //表格配置项
  const [copytableData, setCopytableData] = useState([]) // 表格数据,包含了是否隐藏身份证号的flag
  // 查询列表
  const loadData = async (params) => {
    let obj = JSON.parse(JSON.stringify(params))
    let str = `?page=${params.current}&limit=${params.pageSize}`
    delete obj.pageSize
    delete obj.current
    // 传参分两种类型...
    const res = await pageService.getPageList(obj, str)
    const data = config
    if (res.msgCode === '000000') {
      // 先设置所有身份证号都隐藏
      res.data.data.forEach((item) => {
        item.flag = true
      })
      // 再对还原点击要展示的身份证号行
      data.tableData = Object.assign(res.data.data, copytableData)
      data.pagination.total = res.data.count
      setConfig(data)
    } else {
      message.error(res.message)
    }
    return Promise.resolve({
      data: data.tableData,
      success: true,
      total: data.pagination.total,
    })
  }
  const columns = [
   {
      title: '身份证号(更新后)',
      width: 60,
      dataIndex: 'certPasswordUp',
      hideInSearch: true,
      render: (_, record) => {
        return [
          <a style={{ color: '#000' }} key={record.id}
            onClick={() => {
             let list = JSON.parse(JSON.stringify(config.tableData))
             list.forEach((item) => {
                if (item.id == record.id) {
                  // 点击要表格密码进行显示和隐藏的切换
                  item.flag = !item.flag
                  setCopytableData(list)
                  // 最后记得要刷新视图
                  actionRef.current.reload()
                }
              })
            }}
          >
            {record.flag ? '*****' :record.certPasswordUp}
              // {record.flag ? Utils.desensitization(record.certificatesCode) : record.certificatesCode}
          </a>,
        ]
      },
    },
  ]
}

 return (
    <>
      <ProTable<TableListItem>
        actionRef={actionRef}
        columns={columns}
        className="aaaa"
        {...config}
        request={loadData}
        rowKey="id"
        scroll={{ x: 800 }}
       />
    </>
  )
}