react如何实现一个密码强度检测器详解

这篇文章主要给大家介绍了关于react如何实现一个密码强度检测器的相关资料,使用这个密码强度器后可以帮助大家提高在线帐号、个人信息的安全性,需要的朋友可以参考下

目录

• 前言
• 使用
• 组件编写
• 数据结构解析
• 流程解析
• 底层代码解析
• 其他
• 总结

前言

密码强度文件校验器； 注册帐号的时候我们需要对用户当前的密码强度进行一个评估，这个过程我们需要做一个检测器，最好写的灵活点，这样方便产品修改规则。

先看下效果吧~~   下面是截图对应的状态

使用

1 参数传递

const PasswordForce = passwordForce({     inputValue,     className: 'password-force',   });

2 使用

3 校验

检测是否超出字符PasswordForce.invaildWord

实现例子

我们配置antd实现下密码输入框上面绑定一个提示器吧

1,2都是不需要改的，但是实际我们需要监听input的值然后设置值。于是我们可以定义一个监听修改value的函数

 const [inputValue, setInputValue] = useState(''); const passwordChange = (value: string) => { setInputValue(value); }; const onPasswordInput = (e: any) => { passwordChange(e?.target?.value || ''); }; 

然后绑定即可，绑定好了我们就可以正常显示了，但是，如果输入了非法字符，这时候我们需要通过拦截器拦截。

  ({ validator(_, value) { passwordChange(value); if (PasswordForce.invaildWord) { return Promise.reject( new Error('Password contains invalid characters.'), ); } return Promise.resolve(); }, }), ]} ... 

好了，使用片结束，我们实现下吧。

组件编写

编写组件

 import { getRuleMatchResult, IpasswordForce, IpasswordRule, isMatchForceResultConfig, matchResultConfig, passwordBreakKey, } from '@/utils/passwordStrengthChecker'; import React, { CSSProperties } from 'react'; import { useEffect } from 'react'; import { useState } from 'react'; import styled from 'styled-components'; interface props { inputValue: string; color?: string; style?: CSSProperties; className?: string; customRule?: IpasswordRule[]; } enum ForceMap { high = 'High', middle = 'Mid', low = 'Low', } const boolNumSum = (list: boolean[]) => list.reduce( (previousValue, currentValue) => currentValue ? previousValue + 1 : previousValue, 0, ); const passwordForce: (props: props) => { View: React.FC; invaildWord: boolean; force: IpasswordForce; } = ({ inputValue, style = {}, className, customRule = [] }) => { const [force, setforce] = useState(false); const [invaildWord, setIsInvaildWord] = useState(false); const inputValueLen = inputValue?.length || 0; const setData = () => { setforce(false); const isFirstWordUp = inputValue[0] === inputValue[0].toLocaleUpperCase(); const ruleRsult = getRuleMatchResult(customRule, inputValue, undefined, ''); const matchNum = boolNumSum(ruleRsult.list.map((e) => e[passwordBreakKey])); const matchResultConfig: matchResultConfig[] = [ { min: 0, max: 32, matchNum: 1, value: 'low' }, { min: 7, max: 32, matchNum: 2, value: 'middle' }, { min: 7, max: 32, matchNum: 3, value: 'middle' }, { min: 15, max: 32, matchNum: 3, value: 'high', need: isFirstWordUp }, ]; setIsInvaildWord(ruleRsult.invaildWord); matchResultConfig.forEach((config) => { isMatchForceResultConfig(config, matchNum, inputValueLen) && setforce(config.value); }); }; useEffect(() => { inputValue ? setData() : setforce(false); }, [inputValue]); return { View: () => force ? (  {ForceMap[force]}  ) : (  ), invaildWord, force, }; }; export default passwordForce; const PasswordForceWrap = styled.span` color: ${({ color }) => color ?? '#000'}; `; 

数据结构解析

• list 规则的集合，每一个规则都有是否匹配到和规则名及已规则数据本身。
• map 就是方便直接获取对应规则的数据。
• matchCount 就是匹配到的字符数
• invaildWord 可以根据这个来判断是否有非法字符（超过规则本身规定的字符）

流程解析

这个其实就两个流程

• 根据输入的值和规则获取处理后的数据，获得的数据结构如上面所示。
• 然后再编写具体符合业务需求的config数据交给isMatchForceResultConfig函数去匹配设置强度

嗯。 业务代码差不多就这么多了。 然后里面关于依赖那就是属于基本不会改动的代码，基于下面底层的文件，在业务代码我们可以配置出很复杂的校验器，这部分代码我们可以在其他文件上实现。

底层代码解析

让我们来康康吧。

下面是纯ts代码，可以运行任意框架哦。

passwordStrengthChecker.ts

 import { numberList, specialList, wordList } from './constants'; type map = (opstion: { array: U[]; range: number; matchList: T[]; tokenMap: (updateItem: T, token: U, index: number) => T; breakKey?: string; arrayMap?: (item: U, index: number) => void; }) => T[]; /** * match array and set */ export const setArrayMatch: map = ({ array, range, matchList, breakKey, tokenMap, arrayMap, }) => { const tokenLen = array.length; for (let tokenIndex = tokenLen - 1; tokenIndex >= 0; tokenIndex--) { const arrayToken = array[tokenIndex]; arrayMap && arrayMap(arrayToken, tokenIndex); for (let findIndex = range - 1; findIndex >= 0; findIndex--) { matchList = matchList.map((item) => tokenMap(item, arrayToken, findIndex), ); } if (breakKey && !matchList.map((e) => (e as any)[breakKey]).includes(false)) break; } return matchList; }; export const passwordBreakKey = 'isMatch'; export type IpasswordRule = { list: string[]; isMatch: boolean; name: string; }; export const defaultPasswordRuleList = [ { name: 'special', list: specialList }, { name: 'num', list: numberList }, { name: 'word', list: wordList }, ]; type PickValue = T[K]; export const getRuleMatchResult: ( customRule: IpasswordRule[], inputValue: string, disableDefaultRule?: boolean, breakKey?: string, ) => { list: IpasswordRule[]; map: Map<PickValue, boolean>; matchCount: number; invaildWord: boolean; } = (customRule, inputValue, disableDefaultRule = true, breakKey) => { let ruleList = [ ...(disableDefaultRule ? defaultPasswordRuleList : []), ...customRule, ].map((item) => ({ ...item, [passwordBreakKey]: false })); const range = Math.max(...ruleList.map((ruleItem) => ruleItem.list.length)); let matchCount = 0; ruleList = setArrayMatch({ array: inputValue.split(''), range, matchList: ruleList, // not breakKey  full match breakKey: breakKey === void 0 ? passwordBreakKey : breakKey, tokenMap: (ruleItem, inputToken, findIndex) => { const match = ruleItem?.list[findIndex] === inputToken; if (match) { matchCount++; return { ...ruleItem, isMatch: true }; } return ruleItem; }, }); return { list: ruleList, map: new Map(ruleList.map((e) => [e.name, e[passwordBreakKey]])), matchCount, // 想要获取这个值，必须breakKey设置为空字符，如果提前退出会导致提前中止条件 // To get this value, breakkey must be set to null string invaildWord: matchCount !== inputValue.length, }; }; export const isMatchForceResultConfig = ( config: matchResultConfig, matchNum: number, inputValueLen: number, ) => { return ( matchNum === config.matchNum && inputValueLen >= config.min && inputValueLen <= config.max && (config.need !== undefined ? config.need : true) ); }; export type matchResultConfig = { min: number; max: number; matchNum: number; value: IpasswordForce; need?: boolean; back?: IpasswordForce; }; export type IpasswordForce = false | 'high' | 'middle' | 'low'; 

 export const specialList = ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "-", "/", ",", ".", "?", "", ";", ":", "[", "]", "{", "}", "|", "\\"]; export const numberList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; export const wordList = ["q", "a", "z", "w", "s", "x", "e", "d", "c", "r", "f", "v", "t", "g", "b", "y", "h", "n", "u", "j", "m", "i", "k", "o", "l", "p", "Q", "A", "Z", "W", "S", "X", "E", "D", "C", "R", "F", "V", "T", "G", "B", "Y", "H", "N", "U", "J", "M", "I", "K", "O", "L", "P"];