vue2脱敏手机号、身份证号、客户名称、车牌号等脱敏组件封装

已于 2024-07-30 17:09:15 修改
阅读量639 收藏 4
点赞数 4
分类专栏： 前端好用组件封装 文章标签： mysql 前端 数据库
于 2024-07-30 17:07:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63029264/article/details/140799123
版权

1.结合项目本身制定思路

  1.  根据需求脱敏规则制定正则表达式
  2. 复制 、呼叫、查看功能均可内置，所需必须参数为要脱敏的原文
  3. 脱敏位置（表单脱敏、文本脱敏）
  4. 功能鉴权通过自定义指令配合达到效果

2.组件所需文件创建

2.1在components文件夹内创建我们组件文件夹Desensitization（自己认识即可）创建组件 index.vue 和 enum/index.js文件枚举存储

3.组件封装

3.1 props定制 

 props:{
    // 是否禁用
    disabledInput:{
      type:Boolean || Number,
      default:true
    },
    /**
     * @ * 默认全部显示
     * @Array ['look','copy','call']
     *          查看   复制    拨打
     */
    isPerM:{
      type : String || Array ,
      default : '*'
    },

    /** 显示模式
     *  @body 文本
     *  @input 表单
     */
    showType:{
      type : String,
      default : 'body'
    },
    /**
     * @FormateType 格式化类型
     */
    formatValue:{
      type : String,
      default : 'phone'
    },
    // 原数据，默认明文
    value:{
      require: true,
      type : String || Number,
      default : ''
    }
  },

3.2 data 所需要的变量声明

data(){
    return {
      isCall :[ 'phone', 'fixPhone'], // 可以使用软电话外呼的类型
      isDes: true, // 当前是否脱敏标识
      cacheValue:'' , // 缓存Value 用于控制显隐状态
// 权限列表,可根据自己情况进行控制，我们这边是可以根据两个角色分别控制，不需要可删除使用props的isPerM
      rolePer :['role253563339844767744','role253563339844767755'] 
    }
  },

3.3 template 模版搭建 , ：value数据绑定 , v-if v-hasPermis指令进行功能的控制

<template>
  <div class="des_container">
    <!-- 脱敏组件封装 -->
    <!-- 1. 表单类型 -->
    <div class="des_input" v-if="showType == 'input'">
      <el-input :value="cacheValue" :disabled="disabledInput"></el-input>
    </div>
    <!-- 2. 文本类型 -->
    <div class="des_body" v-else-if="showType == 'body'">
      <span >{{ cacheValue }}</span>
    </div>
    <!-- 3.操作功能 -->
    <div class="des_handle">
      <span class="des_handle_btn" v-if="isDes" v-hasPermis="rolePer[0]" @click="ShowValue">查看</span>
      <span class="des_handle_btn" v-else v-hasPermis="rolePer[0]" @click="HideValue">隐藏</span>
      <span class="des_handle_btn" v-if="isCall.includes(formatValue)" v-hasPermis="rolePer" @click="handleCall">呼叫</span>
      <span class="des_handle_btn copy"  v-hasPermis="rolePer" @click="handleCopy(value)" :data-clipboard-text="value">复制</span>
    </div>
  </div>
</template>

 3.4 导入所需组件和工具类

import RequestUtils from "@/util/RequestUtils.js"; // 封装好的axios请求工具类
import UrlMapping from "@/UrlMapping.js"; // 接口地址映射类
import { FormatType, SaveValue } from "./enum/index.js"; // 格式化类型和脱敏保存类型
import { decryptData_ECB, encryptData_ECB } from "@/script/sm4.js"; // sm4js加密解密方法
import Clipboard from "clipboard";  // 复制插件

3.5 javascript Methods事件

  methods: {
    // 显示明文
    ShowValue() {
      // 1.解密标识
      this.isDes = false;
      // 2.解密赋值原文
      this.cacheValue = this.value;
      // 3.解密时需要对操作进行存储，方便追责（根据实际情况情况进行调用）
      RequestUtils.request(
        { url: "http://xxxxxx.com/decrypt", method: "postjson" },
        {
          decryptData: this.sourceMsg, // 解密数据（电话号码、证件号）
          decryptOperationUi: window.location.pathname.split("/")[2], // 解密操作界面
          decryptUserCode: sessionStorage.getItem("csId"), // 解密工号
        }
      ).then((res) => {});
    },
    // 加密处理
    HideValue() {
      // 1.解密标识
      this.isDes = true;
      // 2.加密赋值正则表达式替换成的密文（这边userName需要单独处理）
      if (this.formatValue == "userName") {
        this.cacheValue = this.value.replace(
          FormatType[this.formatValue],
          SaveValue[this.formatValue](this.value)
        );
      } else {
        this.cacheValue = this.value.replace(
          FormatType[this.formatValue],
          SaveValue[this.formatValue]
        );
      }
    },
    // 执行拨打
    handleCall() {
      // 1.判断是否可以拨打，以下外呼系统是我们项目之前封装好的方法
      if (this.formatValue == "phone") {
        window.phone.phonenum = this.value;
        window.phone.phoneCallType = "phoneCallType";
        window.phone.okCall("queryCallbacktask"); //调用软电话的外呼方法
      }
    },
    // 执行复制
    handleCopy(val) {
      // 1.获取原数据，使用sm4js进行加密处理，不需要可以删除此操作
      const encryptedText = encryptData_ECB(val);
      // 2.使用clipboard插件进行复制，注意按钮上要绑定data-clipboard-text属性：值为原文或密文，还需要绑定class为copy的类名（类名可自定义），还需要引入clipboard.js插件
      const clipboard = new Clipboard(".copy", {
        text: function () {
          return encryptedText;
        },
      });
      // 3.监听复制成功和失败
      clipboard.on("success", () => {
        this.$message.success("复制成功");
        // 清理clipboard实例
        clipboard.destroy();
      });

      clipboard.on("error", () => {
        this.$message.error("复制失败");
        // 清理clipboard实例
        clipboard.destroy();
      });
    },
  },

3.6 鉴权自定义指令封装，因为此指令别的地方用不到，所以可以直接局部注册指令

directives: {
    hasPermis: {
      inserted(el, binding) {
        const checkPermission = (value, permission) => {
          if (typeof value == "string") {
            return !!permission.find((it) => it.roleCode == value);
          } else if (typeof value == "object") {
            var isRole = false;
            for (const item of value) {
              if (permission.find((it) => it.roleCode == item)) {
                isRole = true;
                break;
              }
            }
            return isRole;
          }
        };
        let roleInfo = JSON.parse(sessionStorage.getItem("roleInfo"));
        // el为绑定的元素，binding为绑定的信息对象
        // 实现根据checkPermission函数的结果，动态移除或隐藏元素
        if (!checkPermission(binding.value, roleInfo)) {
          el.parentNode && el.parentNode.removeChild(el);
        }
      },
    },
  },

3.7 css部分，我这里写的是demo,样式可自己进行调整

<style lang="scss" scoped>
.des_container {
  width: 100%;
  height: 100%;
  display: flex;
  .des_input,
  .des_body {
    flex: 1;
  }
  .des_handle {
    display: flex;
    align-items: center;
    .des_handle_btn {
      font-size: 12px;
      color: #409eff;
      width: 28px;
      padding: 0 3px;
      cursor: pointer;
    }
  }
}
</style>

3.8  枚举类定制，格式化类型和格式化需要保存的格式 enum/index.js


/**
 * @phone 手机号码
 * @idCard 身份号码
 * @carId 车牌号码
 * @sex 性别
 * @userName 名称
 * @fixPhone 带区号的座机
 * @birdate 生日或包含日期等
 * @email 邮箱
 * @address 地址
 * @VIN 车架号
 * @EngineNo 发动机号
 * @bindNo 银行卡号，信用卡号
 */
export const FormatType = {
    Landline:'',
    phone:/(\d{3})\d{4}(\d{4})/,
    idCard:/(\d{0})\d{14}(\d{4})/ ,
    carId:/^(.{2})(?:\d+)(.{2})$/,
    sex:/男|女/,
    userName:/(^.{1})(.+)$/g,
    fixPhone:/(\d{4}-)\d{4}(\d{4})/,
    birdate :/\d/g,
    email :/^(.{2})(.*)@(.+)$/,
    address :/省.*/,
    VIN :/^.*(?=.{6}$)/, 
    EngineNo:/./g, 
    bindNo:/^(.{6})(?:\d+)(.{4})$/,  
}

// 保存格式
export const SaveValue = {
    Landline:"$1****$2",
    phone:"$1****$2",
    idCard:'$1********$2',
    carId: '$1***$2',
    sex: '*',
    userName: makedName,
    fixPhone:'$1****$2',
    birdate :'*',
    email :'$1*****@$3',
    address :'省*******',
    VIN :'*******',
    EngineNo:'*',
    bindNo:'$1******$2',
}

/**
 * 脱敏特殊处理
 * @param {*} name 
 * @returns  
 */
// 姓名
const makedName =  (name)=> {
    console.log('args',name)
    if (name.length == 2) {
        name = name.substring(0, 1) + '*'; // 截取name 字符串截取第一个字符，
        return name; // 张三显示为张*
    } else if (name.length == 3) {
        name = name.substring(0, 1) + '*' + name.substring(2, 3); // 截取第一个和第三个字符
        return name; // 李思思显示为李*思
    } else if (name.length > 3) {
        name = name.substring(0, 1) + '*' + '*' + name.substring(3, name.length); // 截取第一个和大于第4个字符
        return name; // 王五哈哈显示为王**哈
    }

}

4. 组件使用样例

/**
 * @使用说明
 * @注 组件内包含 '查看隐藏' 、 '软电话外呼' 、 '复制号码（密文）'
 * 1.局部或者全局导入组件
 * 2.属性传入
 *      2.1 v-model : 挂载原数据
 *      2.2 formatValue 格式化类型 默认：phone
 *      2.3 showType 显示类型 默认为body
 *      2.3 disabledInput 当showType为input时，是否禁用input
 *      2.4 isPerM 权限认证 （当前版本废弃，当前版本通过角色区分，若使用则可传入对应功能码值）
 *
 */

4.1 组件导入，进行局部注册；或者全局注册此组件

效果：

1.示例1   formatValue ="bindNo" 银行卡号

2.示例1   formatValue ="phone" 手机号码

复制结果为加密内容：

 组件完整代码

1.index.vue

<template>
  <div class="des_container">
    <!-- 脱敏组件封装 -->
    <!-- 1. 表单类型 -->
    <div class="des_input" v-if="showType == 'input'">
      <el-input :value="cacheValue" :disabled="disabledInput"></el-input>
    </div>
    <!-- 2. 文本类型 -->
    <div class="des_body" v-else-if="showType == 'body'">
      <span>{{ cacheValue }}</span>
    </div>
    <!-- 3.操作功能 -->
    <div class="des_handle">
      <span
        class="des_handle_btn"
        v-if="isDes"
        v-hasPermis="rolePer[0]"
        @click="ShowValue"
        >查看</span
      >
      <span
        class="des_handle_btn"
        v-else
        v-hasPermis="rolePer[0]"
        @click="HideValue"
        >隐藏</span
      >
      <span
        class="des_handle_btn"
        v-if="isCall.includes(formatValue)"
        v-hasPermis="rolePer"
        @click="handleCall"
        >呼叫</span
      >
      <span
        class="des_handle_btn copy"
        v-hasPermis="rolePer"
        @click="handleCopy(value)"
        :data-clipboard-text="value"
        >复制</span
      >
    </div>
  </div>
</template>


<script>
import RequestUtils from "@/util/RequestUtils.js"; // 封装好的axios请求工具类
import UrlMapping from "@/UrlMapping.js"; // 接口地址映射
import { FormatType, SaveValue } from "./types/enum.js"; // 格式化类型和脱敏保存类型
import { decryptData_ECB, encryptData_ECB } from "@/script/sm4.js"; // sm4js加密解密方法
import Clipboard from "clipboard";  // 复制插件
/**
 * @使用说明
 * @注 组件内包含 '查看隐藏' 、 '软电话外呼' 、 '复制号码（密文）'
 * 1.局部或者全局导入组件
 * 2.属性传入
 *      2.1 v-model : 挂载原数据
 *      2.2 formatValue 格式化类型 默认：phone
 *      2.3 showType 显示类型 默认为body
 *      2.3 disabledInput 当showType为input时，是否禁用input
 *      2.4 isPerM 权限认证 （当前版本废弃，当前版本通过角色区分，若使用则可传入对应功能码值）
 *
 */

export default {
  name: "DjbxSensitiveData", // Sensitive Data
  props: {
    // 是否禁用
    disabledInput: {
      type: Boolean || Number,
      default: true,
    },
    /**
     * @ * 默认全部显示
     * @Array ['look','copy','call']
     *          查看   复制    拨打
     */
    isPerM: {
      type: String || Array,
      default: "*",
    },

    /** 显示模式
     *  @body 文本
     *  @input 表单
     */
    showType: {
      type: String,
      default: "body",
    },
    /**
     * @FormateType 格式化类型
     */
    formatValue: {
      type: String,
      default: "phone",
    },
    // 原数据，默认明文
    value: {
      require: true,
      type: String || Number,
      default: "",
    },
  },
  data() {
    return {
      isCall: ["phone", "fixPhone"], // 可以使用软电话外呼的类型
      isDes: true, // 当前是否脱敏标识
      cacheValue: "", // 缓存Value 用于控制显隐状态
      rolePer: ["role253563339844767744", "role253563339844767755"], // 权限列表,可根据自己情况进行控制，我们这边是可以根据两个角色分别控制，不需要可删除使用props的isPerM
    };
  },
  created() {
    this.cacheValue = this.value.replace(
      FormatType[this.formatValue],
      SaveValue[this.formatValue]
    );
  },
  methods: {
    // 显示明文
    ShowValue() {
      // 1.解密标识
      this.isDes = false;
      // 2.解密赋值原文
      this.cacheValue = this.value;
      // 3.解密时需要对操作进行存储，方便追责（根据实际情况情况进行调用）
      RequestUtils.request(
        { url: "http://xxxxxx.com/decrypt", method: "postjson" },
        {
          decryptData: this.sourceMsg, // 解密数据（电话号码、证件号）
          decryptOperationUi: window.location.pathname.split("/")[2], // 解密操作界面
          decryptUserCode: sessionStorage.getItem("csId"), // 解密工号
        }
      ).then((res) => {});
    },
    // 加密处理
    HideValue() {
      // 1.解密标识
      this.isDes = true;
      // 2.加密赋值正则表达式替换成的密文（这边userName需要单独处理）
      if (this.formatValue == "userName") {
        this.cacheValue = this.value.replace(
          FormatType[this.formatValue],
          SaveValue[this.formatValue](this.value)
        );
      } else {
        this.cacheValue = this.value.replace(
          FormatType[this.formatValue],
          SaveValue[this.formatValue]
        );
      }
    },
    // 执行拨打
    handleCall() {
      // 1.判断是否可以拨打，以下外呼系统是我们项目之前封装好的方法
      if (this.formatValue == "phone") {
        window.phone.phonenum = this.value;
        window.phone.phoneCallType = "phoneCallType";
        window.phone.okCall("queryCallbacktask"); //调用软电话的外呼方法
      }
    },
    // 执行复制
    handleCopy(val) {
      // 1.获取原数据，使用sm4js进行加密处理，不需要可以删除此操作
      const encryptedText = encryptData_ECB(val);
      // 2.使用clipboard插件进行复制，注意按钮上要绑定data-clipboard-text属性：值为原文或密文，还需要绑定class为copy的类名（类名可自定义），还需要引入clipboard.js插件
      const clipboard = new Clipboard(".copy", {
        text: function () {
          return encryptedText;
        },
      });
      // 3.监听复制成功和失败
      clipboard.on("success", () => {
        this.$message.success("复制成功");
        // 清理clipboard实例
        clipboard.destroy();
      });

      clipboard.on("error", () => {
        this.$message.error("复制失败");
        // 清理clipboard实例
        clipboard.destroy();
      });
    },
  },
  directives: {
    hasPermis: {
      inserted(el, binding) {
        // 权限校验函数
        const checkPermission = (value, permission) => {
          if (typeof value == "string") {
            return !!permission.find((it) => it.roleCode == value);
          } else if (typeof value == "object") {
            var isRole = false;
            for (const item of value) {
              if (permission.find((it) => it.roleCode == item)) {
                isRole = true;
                break;
              }
            }
            return isRole;
          }
        };
        // 获取当前用户角色信息
        let roleInfo = JSON.parse(sessionStorage.getItem("roleInfo"));
        // el为绑定的元素，binding为绑定的信息对象
        // 实现根据checkPermission函数的结果，动态移除或隐藏元素
        if (!checkPermission(binding.value, roleInfo)) {
          el.parentNode && el.parentNode.removeChild(el);
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.des_container {
  width: 100%;
  height: 100%;
  display: flex;
  .des_input,
  .des_body {
    flex: 1;
  }
  .des_handle {
    display: flex;
    align-items: center;
    .des_handle_btn {
      font-size: 12px;
      color: #409eff;
      width: 28px;
      padding: 0 3px;
      cursor: pointer;
    }
  }
}
</style>

2.enum/index.js


/**
 * @phone 手机号码
 * @idCard 身份号码
 * @carId 车牌号码
 * @sex 性别
 * @userName 名称
 * @fixPhone 带区号的座机
 * @birdate 生日或包含日期等
 * @email 邮箱
 * @address 地址
 * @VIN 车架号
 * @EngineNo 发动机号
 * @bindNo 银行卡号，信用卡号
 */
export const FormatType = {
    Landline:'',
    phone:/(\d{3})\d{4}(\d{4})/,
    idCard:/(\d{0})\d{14}(\d{4})/ ,
    carId:/^(.{2})(?:\d+)(.{2})$/,
    sex:/男|女/,
    userName:/(^.{1})(.+)$/g,
    fixPhone:/(\d{4}-)\d{4}(\d{4})/,
    birdate :/\d/g,
    email :/^(.{2})(.*)@(.+)$/,
    address :/省.*/,
    VIN :/^.*(?=.{6}$)/, 
    EngineNo:/./g, 
    bindNo:/^(.{6})(?:\d+)(.{4})$/,  
}

// 保存格式
export const SaveValue = {
    Landline:"$1****$2",
    phone:"$1****$2",
    idCard:'$1********$2',
    carId: '$1***$2',
    sex: '*',
    userName: makedName,
    fixPhone:'$1****$2',
    birdate :'*',
    email :'$1*****@$3',
    address :'省*******',
    VIN :'*******',
    EngineNo:'*',
    bindNo:'$1******$2',
}

/**
 * 脱敏特殊处理
 * @param {*} name 
 * @returns  
 */
// 姓名
const makedName =  (name)=> {
    console.log('args',name)
    if (name.length == 2) {
        name = name.substring(0, 1) + '*'; // 截取name 字符串截取第一个字符，
        return name; // 张三显示为张*
    } else if (name.length == 3) {
        name = name.substring(0, 1) + '*' + name.substring(2, 3); // 截取第一个和第三个字符
        return name; // 李思思显示为李*思
    } else if (name.length > 3) {
        name = name.substring(0, 1) + '*' + '*' + name.substring(3, name.length); // 截取第一个和大于第4个字符
        return name; // 王五哈哈显示为王**哈
    }

}

此上就是这个组件结合需求来封装的一个简单的组件，脱敏需求很常见希望帮到大家！！

蔡蔡不太菜
关注
专栏目录
ReactNative 公共脱敏处理js 包括银行卡 身份证号 手机号企业名称 营业执照 邮箱号码 等等
闫瑞锋的博客
04-19 2010
//全局公用的对数据脱敏处理方法 参数可以是单个也可以是多个，但是格式必须是字符串 export default function publicDesensitization(){ //先将内置的 arguments 转换为真正的数组 var dataArr = Array.prototype.slice.apply(arguments); for (var i = 0;...
vue-身份证脱敏,手机号码脱敏，js
小蔡蔡的博客笔记
12-11 769
vue-身份证脱敏,手机号码脱敏，js
vue封装正则脱敏方法，可直接用到项目中
weixin_47464138的博客
10-31 830
vue封装正则脱敏 身份证 ， 手机号，姓名等方法，可直接用到项目中
前端实现个人信息脱敏（手机号、身份证号、姓名、邮箱）示例
最新发布
czyzhiyuan的博客
09-02 1082
本文将通过JavaScript代码示例，演示如何对手机号、身份证号、姓名、邮箱等个人数据进行脱敏处理。确保满足需求的同时保护用户的隐私。
vue计算属性实现姓名、手机号脱敏(替换字符串中间四位为星号)
码农键盘上的梦
07-21 5814
实现结果：姓名脱敏规则：姓名两个字=>显示姓,名用*代替姓名三个字=>显示第一位和第三位,第二位用*代替姓名大于四个字=>第二位第三位*号代替,其余正常显示手机号脱敏规则：仅显示前三位及后四位数字，隐藏信息用*代替。
Vue 数据脱敏
qq_44926700的博客
11-25 1888
Element-Ui 表格表单数据脱敏
使用vue的过滤器给手机号脱敏
weixin_42496938的博客
09-12 800
使用filter过滤器处理手机号格式。在需要处理的文本加上 |在main.js文件中。
vue身份证号、手机号、姓名脱敏处理
ppzhu1122的博客
12-15 4447
姓名脱敏： 2位到5位以上的不同处理 hideInsurantName (val) { if (!val || val === '') return '' let name = '' if (val.length === 2) { name = val.substring(0, 1) + '*' // 截取name 字符串截取第一个字符， } else if (val.length === 3) { name..
手机号码、邮箱等敏感数据前端显示脱敏处理的解决方案
02-08
在我们数据库中有些时候会保存一些用户的敏感信息，比如：手机号、银行卡等信息，如果这些信息以明文的方式保存，那么是不安全的。 假如：黑客黑进了数据库，或者离职人员导出了数据，那么就可能导致这些敏感数据的...
Vue页面将获取的姓名和手机号脱敏展示
HuLuWa1997的博客
01-14 1579
// 将姓名和手机号脱敏 formatStr() { if (this.formList.name && this.formList.name.length == 2) { this.name = this.formList.name.slice(0, 1) + "*"; } else if (this.formList.name && this.formList.name.length > 2) { co
Vue中根据输入的身份证号识别年龄、性别
m0_57391092的博客
11-10 3178
需求：根据用户输入的身份证号识别出年龄和性别，回显到相应的输入框中 分析：定义身份证号的正则表达式，利用字符串的方法截取出相关字符进行判断 示例： <template> <div class="box"> <!-- 根据身份证号生成性别，年龄 --> <div class="form_txt">根据身份证号生成性别、年龄</div> <el-form :model="form" label-width="80px"&.
Vue项目中手机号脱敏（星号代替）
往事随风
04-10 4336
最近接到一个需求，身份敏感信息只显示前面两位和后面两位，中间其他部分进行打码，就在全局搞了一个过滤器 1、在main.js中进行全局过滤 Vue.filter('replacestar', function (value) { if (!value) return ''; let str = value; str = str.replace(new RegExp("[^0-9]+","g"),"") if(str.length==11){ str = str.toString
vue3中，校验方法之身份证号脱敏、校验数字长度、特殊字符校验
weixin_44867717的博客
08-28 994
【代码】vue3中，校验方法之身份证号脱敏、校验数字长度、特殊字符校验。
vue身份证号脱敏显示
RAGACM的博客
09-18 3813
vue想要对身份证进行展示，但是又不想对其年月日部分进行展示，可以尝试是使用正则的方法进行脱敏处理。 if(this.ownerVo.ownerCard.length >= 10){ let str = this.ownerVo.ownerCard str = str.replace(/(\w{6})\w*(\w{4})/,'$1******$2'); this.ownerVo.ownerCard = str } 效果图如下： ...
js、vue、手机号、身份证号、姓名脱敏
m0_58352785的博客
06-15 3181
vue.js 手机号、身份证号、姓名脱敏
对敏感信息脱敏，如对姓名、证件号码、手机号码、银行卡号码进行脱敏
小草莓的博客
05-25 9035
显示姓名中的第一个和最后一个字，如为英文等其他语种，也是显示第一个和最后一个字母。显示姓名中的第一个字，如为英文等其他语种，也是显示第一个字母。张* 王** A*****三 王*蛋 A****e。显示前1/3和后1/3段，其他用*号代替。显示前2位和后2位，其它用*号代替。显示前3位+ *（实际位数）+后4位。显示姓名中的第一个和最后一个字，显示前3位+****+后4位。显示姓名中的第一个字，
前端对敏感数据身份证号姓名等进行脱敏处理
luoxiaonuan_hi的博客
07-01 5543
前端敏感信息脱敏处理
vue手机号中间显示****（脱敏）
m0_60207396的博客
10-19 1371
在table表头 { title: '手机号', align: 'center', dataIndex: 'mobile', customRender: function (t) { t = t.replace(t.substr(3, 4), '****') return t }, },
vue 手机号脱敏正则
08-18
在Vue中对手机号进行脱敏可以使用正则表达式来实现。根据提供的代码，可以看到在全局过滤器中使用了`replacestar`对手机号进行处理。具体的正则表达式如下： ```javascript new RegExp("[^0-9]", "g") ``` 这个正则表达式会匹配所有非数字的字符，并使用空字符串进行替换。然后根据手机号的长度，使用不同的正则表达式进行进一步处理： ```javascript if (str.length == 11) { str = str.toString().replace(/(\d{2})\d*(\d{2})/, '$1*******$2'); } else { str = str.toString().replace(/(\d{2})\d*(\d{2})/, '$1*********$2'); } ``` 这两个正则表达式分别用于处理11位手机号和其他位数的手机号。它们会将手机号的中间部分替换为若干个`*`，只显示前面两位和后面两位。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue项目中手机号脱敏（星号代替）](https://blog.csdn.net/m0_46183499/article/details/124076499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值