React - 实现一个基于 Antd 的密码强度校验组件

12月

本文最后更新于2023年12月28日，已经过了132天没有更新，若内容或图片失效，请留言反馈

在基于 Nest 和 Umi 技术栈的个人项目开发中，在用户管理模块需要用到一个密码强度校验组件，在网上寻找一方资料，没有找到自己想要的，特此自己造轮子！

效果预览

组件思想

既然是密码强度校验，那么强度就必须有个梯度，这个时候就必须找到一个合适的效果。

我们有两种方向：

组件库找个合适的 UI
自己开发造轮子

经过一番摸索，Antd-Process 组件进入了我的视野：

于是我决定基于这个组件改造一番！

组件开发

在目录 /src/components 新建 StrengthMeter/index.tsx 文件，开发基本结构。

Typescript 代码:

/*
 @Description: 密码强度组件
 @Version: 2.0
 @Author: 白雾茫茫丶
 @Date: 2023-01-09 17:15:19
 @LastEditors: 白雾茫茫丶
 @LastEditTime: 2023-01-16 15:40:45
*/
import type { FC } from 'react'
import { Progress, Form, Row, Col } from 'antd';
import { ProFormText } from '@ant-design/pro-components'; // antd 高级组件
import zxcvbn from 'zxcvbn'; // 密码强度校验

const StrengthMeter: FC = () => {
// 获取上下文 form 实例
const form = Form.useFormInstance();
// 监听密码的改变
const password = Form.useWatch('password', form);

/**
 * @description: 监听密码强度相应变化
 * @param {string} password
 */
const watchStrength = (password: string): number => {
const analysisValue = zxcvbn(password)
// score得分只有0~4，且只有整数范围并没有小数
return (analysisValue.score + 1) * 20
}

return (
<>
  {/* 密码 */}
  <ProFormText.Password
    label="密码"
    name="password"
    rules={[{ required: true, min: 6, max: 12, message: "请输入密码" }]}
  />
  {/* 确认密码 */}
  <ProFormText.Password
    label="确认密码"
    name="confirmPassword"
    fieldProps={{ visibilityToggle: false }}
    rules={[
      { required: true, message: "请输入确认密码" },
      ({ getFieldValue }) => ({
        validator(_, value) {
          if (!value || getFieldValue('password') === value) {
            return Promise.resolve();
          }
          return Promise.reject(new Error("两次密码输入不一致"));
        },
      })
    ]}
  />
  {/* 显示密码强度 */}
  <Progress
    percent={password ? watchStrength(password) : 0}
    steps={5}
    strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
    showInfo={false}
  />
  <Row justify="space-around">
    {
      ['非常弱', '弱', '一般', '强', '非常强'].map(value => <Col span={4} key={value}>{value}  </Col>)
    }
  </Row>
</>
)
}

export default StrengthMeter

由于 Progress 的 ant-progress-steps-item 无法自动撑开，我们需要新建一个 index.module.less 文件做样式穿透:

CSS 代码:

.process-steps{
width:100%;
text-align: center;
:global(.ant-progress){
width:100%
}
:global(.ant-progress .ant-progress-steps-item){
width:calc(20% - 2px) !important
}
}

引入样式并绑定类名：

Typescript 代码:

import styles from './index.module.less'

<div className={styles['process-steps']}>
<Progress
  percent={password ? watchStrength(password) : 0}
  steps={5}
  strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
  showInfo={false}
/>
</div>
<Row justify="space-around" className={styles['process-steps']}>
{
  ['非常弱', '弱', '一般', '强', '非常强'].map(value => <Col span={4} key={value}>{value}</Col>)
}
</Row>

这时候就能得到我们想要的效果了，接下来我们要校验密码强度。

安装 zxcvbn 库

执行安装命令
PowerShell 代码:
```
pnpm add zxcvbn
```

页面引入

Typescript 代码:

import zxcvbn from 'zxcvbn';

// zxcvbn 是个函数，接收一个参数，参数就是字符串密码。
zxcvbn("abc123456");

该函数返回一个对象，其中与密码强度相关的属性有：guesses、guesses_log10、score。

那么这三个属性，我们应该怎么选择呢？

guesses 值很大，不利于我们判断。

guesses_log10 的值越大越安全，根据测试，值在 12 以上就很安全了。

score 的取值范围只有整数 0~4，值越大越安全。

如果业务考虑的场景比较多，建议使用 guesses_log10，这里我们封装使用 score。

使用 Form.useWatch 监听 password 的变化：

Typescript 代码:

  // 获取上下文 form 实例
  const form = Form.useFormInstance();
  // 监听密码的改变
  const password = Form.useWatch('password', form);

编写一个函数解析 password ：

Typescript 代码:

const watchStrength = (password: string): number => {
const analysisValue = zxcvbn(password)
// score得分只有0~4，且只有整数范围并没有小数
return (analysisValue.score + 1) * 20
}

绑定到 Progress 组件：

Typescript 代码:

<Progress
percent={password ? watchStrength(password) : 0}
steps={5}
strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
showInfo={false}
/>

到这里，我们的任务就完成了，我们一起看看实际效果吧：