Vue3 Hooks 手机号脱敏

记录一下

定义了一个用于手机号加密的 usePhoneEncryption 函数，它返回一个对象，一个加密手机号的函数

前端脱敏不安全：使用这种简单的加密方法（将手机号的一部分用 '*' 替代）并不真正安全，特别是对于需要严格保护用户隐私的场景。这种方法仅用于在用户界面上隐藏部分信息，但无法防止恶意用户通过其他手段获得完整手机号。在处理敏感信息时，建议使用更复杂的加密算法和数据保护措施。

// usePhoneEncrypt.ts
import { ref } from 'vue';
// 引入直接调用 
// 方法(手机号) -- 例如 encryptPhone(手机号)
/**
 * 手机号加密
 * @returns {Object} 包含加密手机号的函数
 * encryptPhone(PhoneNumber: number)
 */
export function usePhoneEncryption() {
  const encryptPhone = (phoneNumber?: number): string => {
    // 如果 phoneNumber 是 undefined，则返回空字符串或者其他你认为合适的默认值
    if (phoneNumber === undefined || phoneNumber === null) {
      return '--';
    }

    const phoneNumberStr = phoneNumber.toString();

    // 验证手机号长度
    if (phoneNumberStr.length !== 11) {
      return '--';
    }

    const startDigits = phoneNumberStr.slice(0, 3);
    const endDigits = phoneNumberStr.slice(-4);
    const hiddenDigits = '*'.repeat(4); // 隐藏4位

    // 构建加密后的电话号码字符串
    return `${startDigits}${hiddenDigits}${endDigits}`;
  };

  return {
    encryptPhone,
  };
}