web/packages/vue-anti

@jianyu/vue-anti

npm-package-git-url-formats

[官网npm-package-git-url-formatsnpm-package-git-url-formats](https://docs.npmjs.com/about-packages-and-modules#npm-package-git-url-formats

• http://192.168.3.207:8080/EFE/vue-anti.git#commit-ish
• ssh://root@192.168.3.207:10022/EFE/vue-anti.git#commit-ish

commit-ish 可以是所有标签 、sha (commit-id)、分支

commit-ish 默认是master

开发库

yarn
yarn run serve

引用库

安装

1. 在package.json的dependencies中添加
{
  "dependencies": {
    "@jianyu/vue-anti": "http://192.168.3.207:8080/EFE/vue-anti.git#v0.1.0",
  }
}
2. 执行命令 yarn

# 使用git tag进行包的版本管理
http://192.168.3.207:8080/EFE/vue-anti.git#v0.1.0
{仓库地址}#{commit-ish}

调用<反爬弹窗>示例

！！！<反爬弹窗>和<解密方法>同时使用的情况下。必须先注册反爬弹窗，后注册解密方法。因为反爬弹窗会修改拦截器

// 库一共提供了以下内容
import {
  VerifyPointsComponent, // 验证码组件.vue
  VerifyPointsPopup, // (popup+验证码组件).vue
  VerifyPointsClass, // 提供了js调用VerifyPointsPopup的class
  registerAntiInterceptors // 集成axios响应拦截器，并支持重发请求等弹窗验证逻辑
} from '@jianyu/vue-anti'

拦截器注册方式

这是最简单的使用方式。只需要引入调用并传入 axios 实例即可

import service from './service'
import { registerAntiInterceptors } from '@jianyu/vue-anti'
// 注册拦截器
registerAntiInterceptors(service)
export default service

JS调用方式

该库还提供了单独调用验证码弹窗的class。

在 拦截器注册 满足不了需求的情况下可以更加灵活的使用验证码弹窗组件

import { VerifyPointsClass } from '@jianyu/vue-anti'
const instance = new VerifyPointsClass()

// 显示弹窗
instance.verify({
    value: true, // 控制显示隐藏
    imgBase64: res.imgData,
    textVerify: res.textVerify,
    refresh () {},
    confirm (msg) {
        const { pointsCoordinate, imgWidth } = msg
        // pointsCoordinate，验证点的坐标信息 [`${x},${y}`]
        // example: ['34,22', '76,82']
        // imgWidth图片宽度 Int(px)
        console.log(msg)
    }
})

// 隐藏弹窗
instance.verify({ value: false })

// 弹窗高级用法
const iReceivedMsg = await new Promise((resolve) => {
    instance.verify({
        value: true,
        imgBase64: res.imgData,
        textVerify: res.textVerify,
        refresh () {
            resolve({
                type: 'refresh'
            })
        },
        confirm (msg) {
            resolve({
                type: 'confirm',
                imgw: msg.imgWidth,
                antiVerifyCheck: msg.pointsCoordinate.join(';')
            })
            verify.$vm.onReset()
        }
    })
})
console.log(iReceivedMsg)

引用组件方式

该库还可以支持在vue组件内使用

在页面弹窗可以使用 VerifyPointsPopup 组件（不推荐，由于弹窗样式由该库单独封装，动画以及各种api不够丰富，建议使用项目组件库弹窗嵌 使用。）

嵌入到页面信息流中可以使用 VerifyPoints 组件（推荐）

<template>
	<VerifyPoints />
	<VerifyPointsPopup v-model="show"></VerifyPointsPopup>
</template>
<script>
import { VerifyPoints, VerifyPointsPopup } from '@jianyu/vue-anti'  
export default {
    name: 'test',
    components: {
        VerifyPoints,
        VerifyPointsPopup
    },
    data () {
        return {
            show: true
        }
    }
}
</script>

调用<解密方法>示例

！！！<反爬弹窗>和<解密方法>同时使用的情况下。必须先注册反爬弹窗，后注册解密方法。因为反爬弹窗会操作拦截器

import service from './service'
import { registerDecryptInterceptor } from '@jy/vue-anti'

registerDecryptInterceptor(service)
export default service