持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

#摘要

今天我们来介绍一个比较方面的人机验证（滑动验证码插件）@alex_xu/react-slider-vertify，这个插件可以方便的解决我们的对于验证码检测的烦恼。并且这个可以和我们的后端业务实现解耦。他是单独的一个包组件，不需要后端校验，我们使用它，当我们选择到了正确的位置时，她会自动触发success方法。当选择位置出现错误的时候，她会触发失败的方法，并直接触发验证码更新。

##  react-slider-vertify}NPM地址

使用起来非常方便，我们几乎不需要书写太多的代码。我个人大概使用了不超过10行的代码就完成了这个功能。

#个人实现

安装

npm install @alex_xu/react-slider-vertify // npm安装
yarn add @alex_xu/react-slider-vertify // yarn安装

使用

// 引入
import { Vertify } from '@alex_xu/react-slider-vertify';
const [vertify, setVertify] = useState<boolean>(false);

<Vertify
    width={320}
    height={160}
    visible={true}
    onSuccess={() => setVertify(true)}    //成功触发事件
    onFail={() => setVertify(false)} // 失败触发事件
    onRefresh={() => alert('refresh')}
/>

我使用一个useStatus这个Hook来控制用户是否完成了划块验证。如果验证了vertify将变成true，否则就是false。

  const handleSubmit = async (values: API.LoginParams) => {
  // 判断是否通过滑块验证
    if (verbify) {
      try {
        // 登录
        const msg = await login({ ...values, type });
        if (msg.status === 'ok') {
          const defaultLoginSuccessMessage = intl.formatMessage({
            id: 'pages.login.success',
            defaultMessage: '登录成功！',
          });
          localStorage.setItem('token', msg.token);
          message.success(defaultLoginSuccessMessage);
          await fetchUserInfo();
          /** 此方法会跳转到 redirect 参数所在的位置 */
          if (!history) return;
          const { query } = history.location;
          const { redirect } = query as { redirect: string };
          history.push(redirect || '/');
          return;
        } else {
          const defaultLoginErrorMessage = intl.formatMessage({
            id: 'pages.login.error',
            defaultMessage: '用户密码不正确',
          });
          message.error(defaultLoginErrorMessage);

          // 如果失败去设置用户错误信息
          setUserLoginState(msg);
        }
      } catch (error) {
        const defaultLoginFailureMessage = intl.formatMessage({
          id: 'pages.login.failure',
          defaultMessage: '登录失败，请重试！',
        });
        message.error(defaultLoginFailureMessage);
      }
    } else {
      message.error("请先进行滑动验证")
    }

  };

handleSubmit是一个登录表单的登录操作，我们只需要在这个函数中把verbify变量引入，控制他是否有通过验证即可。如果通过我们就进行表单提交，否则就给出提示。

总结

这个组件上手基本没难度，引入直接使用即可。