前端代码基础防爬

本文将介绍前端代码防爬的基本实现方式，大致分为两个大的关键步骤。 其一是将自定义字体设置为全局css样式。其二是将从后端获取来的原始数据变成咱们需要展示的样子(类似于密码本翻译)。

第一步——设置全局css样式

1.在项目前端文件的src/asccets下创建文件base.css(名字可自定义，外层CSS文件夹可以没有）

2.在base.css文件中将需要全局使用的样式放入

@font-face {
  font-family: stonefont;
  src: url('@/assets/movie.woff') format('woff');
}

.stonefont {
  font-family: stonefont;
}

 

3.在main.js文件中，导入此文件，将stonefont注册成全局样式

import './assets/css/base.css'

4. 给需要展示加密数据的标签设置class="stonefont"

以上是如何设置全局属性，接下来说一下处理原始数据的方法

第二步——原始数据处理

1.在项目前端文件的src/utils下创建文件fontsize.js(名字可以自定义)

2.在fontsize.js文件中将需要使用的方法函数放入 

export function changeNumStrToCodeStr(numStr) {
  // numStr是原始的字符串
  // 不要处理原始的字符串
  const numStrArr = numStr.split('') // 将原有的numStr逐位打散成数组
  const resultArr = [] // 新建一个空数组用来存，逐位转换的结果

  // 创建一个对象，用来存储各数字对应字符关系
  const numToCodeMap = {
    0: '&#xEE7',
    1: '&#xF57',
    2: '&#xE7D',
    3: '&#xF19',
    4: '&#xF59',
    5: '&#xEA1',
    6: '&#xE33',
    7: '&#xE9C',
    8: '&#xEF4',
    9: '&#xE62'
    // ....剩余的补上
  }
  numStrArr.forEach((element) => {
    if (Object.hasOwnProperty.call(numToCodeMap, element)) {
      // 以逐位做key，如果找到就把翻译结果放进去
      resultArr.push(numToCodeMap[element])
    } else {
      // 如果没获取到翻译，就放空,或其他 错误处理
      console.log('未获取到对应关系，请检查对应关系或数据')
      resultArr.push('')
    }
  })

  return resultArr.join('')
}

注：上述对应关系（如：0: '&#xEE76'） 来自于movie.woff文件，如果有需求改变对应规则那么只需要维护对应关系并且替换.woff文件即可

 3.在需要做加密处理的文件中，导入此文件，导入方式及位置如下

 4.在需要使用的位置直接调用即可

注：在函数中咱们需要的是处理之后的函数返回值，所以需要接收一下（比如图中的this.one，此处建议在data中定义一个变量接收一下） 

5.在使用时可以将v-html后的one换成使用时定义的变量