Kynareth集成方式

npm install fe-enigma-kynareth

构造函数

new Kynareth()

使用方法

在main.js中：

import axios from 'axios'

import Kynareth from '@longfor/kynareth'

const kynareth = new Kynareth()

kynareth.setAdapter(axios) // 0.0.19 版本之前

kynareth.setAdapter(axios, onSubmitMaskedData, onMaskedResponseDetected) // 0.0.20以上

// 当Kynareth检测到可能正在提交脱敏数据会回调这个方法

const onSubmitMaskedData = (axiosRequestConfig) => {

   // do anything you like

   // even raise an error to stop this request

}

const onMaskedResponseDetected = (axiosResponse) => {

   // do anything you like

   // for example: mara.probe({some info useful for debug})

}

// 由于Kynareth 需要使用axios，对其进行拦截器的设置，因此需要把axios工厂实例传入Kynareth

请注意，以下说明需server端配合，如需体验，请跳转去这里安装并启用demo server

以上代码的作用是：

• 后端统一拦截器会对字符串类型进行匹配

• 手机号

• 银行卡号

• 身份证号

• 后端拦截器对字段值进行脱敏，形式如下：

• 179 {{????}} 4215

• 610 {{??? ???? ????}} 1012

• Kynareth在axios拦截器层面对字段值进行重写，将上面的脱敏值修改为

• 610 *** **** **** 1012

• vue render之后Kynareth会对渲染了脱敏值的dom进行修饰，在其右边添加小眼睛组件

• 点击小眼睛组件，会发起携带非对称签名的真实数据的请求

• 返回值仅为当前字段的未脱敏值

• Kynareth 会利用vue的响应式原理修改组件中的data值，并响应式的渲染到dom上

关于编辑页需要的全量真实数据场景

如需response中包含全量未脱敏数据时，比如编辑页上显示的数据应该均为真实数据。

在此场景下，前端调用接口时需要自行添加标记，以便后端知道需要返回全量真实数据。

具体方法如下：

const { cnonce, signature, timestamp } = await window.kynareth.sign()
  const headers = {
    'x-enigma-cnonce': cnonce,
    'x-enigma-signature': signature,
    'x-enigma-timestamp': timestamp // 适用于 0.0.16 版本以上
  }
  axios.get('http://localhost:3000', { headers })
    .then(res => {
      console.log(res)
      state.name = res.data.name
      state.idnumber = res.data.idnumber
      state.phone = res.data.phone
    })

携带:

• x-enigma-enonce

• x-enigma-signature

• x-enigma-timestamp

三个请求头时，后端会在通过签名校验后，返回不脱敏的全部字段数据