修改数据时数据脱敏怎么处理？

Question

前端用的vue,elementui，要求对手机号，身份号等脱敏，比如将手机号[phone]展示为130xxxxx5678,请问修改数据时输入框手机号显示130xxxxx5678，直接点保存手机号保持不变，如果修改时要全部重新输入，应该怎么处理？

Answer 1

服务器端进行脱敏更安全，前端你在怎么处理，都容易被看到原始的电话号码
前端：

export default {
  data() {
    return {
      _rawData: {
        phone: '13012345678',
      },
      displayData: {
        phone: '',
      },
    }
  },
  methods: {
    maskPhone(phone) {
      return phone.substr(0, 3) + 'xxxxx' + phone.substr(8);
    },
    save() {
      const phone = this.displayData.phone.includes('x') ? this._rawData.phone : this.displayData.phone;
      // 用phone进行保存操作...
    },
  },
  created() {
    this.displayData.phone = this.maskPhone(this._rawData.phone);
  },
}

Answer 2

如果是想达到这样一个效果，没啥问题，但是前端做别人还是可以看到的。
可以采用“双input框”方法，通过区分展示值和真实值的方式，让接口传真实值，而页面展示脱敏后的数据。

http://e.betheme.net/article/show-389582.html?action=onClick

Answer 3

数据展示的时候用computed做一下脱敏就好了，操作还是正常操作data中的phone值，不过只要前端接收到的是真实数据，前端做脱敏展示的意义并不大。

<template>
    <view>
        {{patPhone(phone)}}
    </view>
</template>
<script>
    export default {
        data() {
            return {
                phone: '13213211321'
            }
        },
        computed: {
            patPhone() {
                return (phone) => {
                    let pat = /(\d{3})\d*(\d{4})/
                    return phone.replace(pat, '$1****$2')
                }
            }
        }
    }
</script>