最近在开发 NestUmi 技术栈的个人项目,在用户管理模块需要用到一个密码强度校验组件,在网上寻找一方资料,没有找到自己想要的,特此自己造轮子!

效果预览

image.png

组件思想

  1. 既然是密码强度校验,那么强度就必须有个梯度,这个时候就必须找到一个合适的效果。
  2. 我们有两种方向:① 组件库找个合适的 UI , ② 自己开发造轮子
  3. 经过一番摸索, AntdProgress 组件进入了我的视野:

image.png

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

组件开发

  1. 在目录 /src/components 新建 StrengthMeter/index.tsx 文件,开发基本结构。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    /*
    * @Description: 密码强度组件
    * @Version: 2.0
    * @Author: Cyan
    * @Date: 2023-01-09 17:15:19
    * @LastEditors: Cyan
    * @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
    * @return {*}
    * @author: Cyan
    */
    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
  2. 此时的效果是这样的:

image.png

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

1
2
3
4
5
6
7
8
9
10
.process-steps{
width:100%;
text-align: center;
:global(.ant-progress){
width:100%
}
:global(.ant-progress .ant-progress-steps-item){
width:calc(20% - 2px) !important
}
}

然后引入样式并绑定类名:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>

这时候就能得到我们想要的效果了,接下来我们要校验密码强度。
3. 这里我们要用到一个库:zxcvbn,页面引入

1
import zxcvbn from 'zxcvbn';

zxcvbn 是个函数,接收一个参数,参数就是字符串密码。

1
zxcvbn("abc123456");

该函数返回一个对象,其中与密码强度相关的属性有:guessesguesses_log10score
image.png
那么这三个属性,我们应该怎么选择呢?
①: guesses 值很大,不利于我们判断。
②: guesses_log10 的值越大越安全,根据测试,值在 12 以上就很安全了。
③: score 的取值范围只有整数 0~4,值越大越安全。
如果业务考虑的场景比较多,建议使用 guesses_log10,这里我们封装使用 score
4. 使用 Form.useWatch 监听 password 的变化:

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

编写一个函数解析 password

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

绑定到 Progress 组件:

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

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

动画.gif

仓库地址:Xmw-Admin

如果对你有用,麻烦给个 star !