PC项目——vue 脚手架中实现阿里云人机滑动验证

转自๑柯帆๑

找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证

一、报错问题解决

描述：照官网写的引入方式引入vue报错 AWSC is not define

解决：.html文件引入script标签后

<!-- 阿里滑块 -->
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

在使用滑块的页面中需要再引入一遍script，大概是在页面内容之前要先加载该功能的资源吧

<script type="text/javascript"></script>

二、记录整个项目流程

1.html文件中script标签引入阿里滑块js资源

2.使用滑块的页面或组件中再次进入script标签

3.组件中构建滑块容器

(对于一个页面中嵌套多个组件的登录最好滑块数量不超过两个，亲身项目经历，会导致滑块重置等方法失效)

<div id='nc1'></div>
<div id='nc2'></div>

4.编写滑块初始化方法，我写的是同个路由页面两个滑块切换

单个滑块的方法在阿里滑块官网介绍入口中可以参考

data () {
	ncData: {}, // 用于存放滑动成功后的回调数据
	box1: null, // 用于接收整个滑动对象window.nc
	// 每个容器对应一个box属性，所以我在data中定义了两个box属性
	box2: null
}

methods: {
// 滑块测试
    init (idName, i) { 
    // idName是多个滑块的容器名称，i是data中用来接收整个滑块返回对象的属性
      const myLang = {
        'cn': {
          // 加载状态提示。
          'LOADING': '加载中...',
          // 等待滑动状态提示。
          'SLIDE': '请向右滑动验证',
          // 验证通过状态提示。
          'SUCCESS': '验证通过',
          // 验证失败触发拦截状态提示。
          'ERROR': `哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次`,
          // 验证失败触发拦截状态提示。
          'FAIL': `验证失败，请重试，点击<a href="javascript:__nc.reset()">刷新</a>再来一次`
        }
      }
      let _this = this
      // 实例化nc
      AWSC.use('nc', function (state, module) {
        // 初始化
        window.nc = module.init({
          // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: 'XXXXXXXXXXX',
          // 使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: 'XXXX',
          renderTo: idName, // idName就是要渲染滑动的容器id名，即上面的nc1/nc2
          upLang: myLang,
          success: function (data) {
            _this.ncData = {
            // 将登陆所需要的所有数据存放data中
              sessionId: data.sessionId,
              sig: data.sig,
              token: data.token,
              scene: 'XXXX'
            }
            _this.$message.success('成功，请继续操作')
          },
          // 滑动验证失败时触发该回调参数。
          fail: function (failCode) {
            _this.$message.warning('失败，请点击重试')
          },
          // 验证码加载出现异常时触发该回调参数。
          error: function (errorCode) {
            window.console && console.log(errorCode)
          }
        })
        // 给this.box1/this.box2分别赋值
        _this[i] = window.nc
      })
    }
  }

5.mounted中进行初始化调用

mounted () {
	this.init('nc1', 'box1')
	this.init('nc2', 'box2')
}

6.登录失败或者切换登录时需要重新渲染重置滑块，官网提供了方法

window.nc[方法名] 或 window.nc.方法名

之前在data中定义了box1/box2，初始化方法中分别对其赋值了，赋值的内容就是该对象，所以重新渲染时使用方法如下

this.box1.reset()
this.box2.reset()
// 记得重置时把滑动成功获得的数据清空
this.ncData = {}

7.结束了