witChangePassword 密码修改组件
witChangePassword 是一个用于用户密码修改的组件,包含密码提示和密码修改两个对话框,支持密码复杂度验证和自动提示功能,适用于需要定期修改密码的管理系统。
用法实例
vue
<template>
<div>
<!-- 密码修改组件 -->
<witChangePassword />
</div>
</template>
<script lang="ts" setup>
// 无需额外配置,组件会自动检测密码状态并显示提示
</script>API
组件
| 组件名 | 描述 |
|---|---|
witChangePassword | 密码修改组件,包含密码提示和修改功能 |
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| - | - | - | 该组件无需配置属性 |
方法
| 方法名 | 描述 | 参数类型 |
|---|---|---|
| - | - | - |
事件
| 事件名 | 描述 | 参数 |
|---|---|---|
| - | - | - |
功能特性
密码提示功能
- 根据用户信息自动检测密码状态
- 支持三种提示类型:密码简单提示、密码即将过期、密码已过期
- 密码已过期时强制修改,不可关闭对话框
- 密码简单或即将过期时可选择下次再说
密码修改表单
- 提供密码输入框,支持密码可见性切换
- 实时验证密码格式和复杂度
- 根据系统配置决定是否开启密码复杂度验证
- 密码不符合要求时显示明确提示
密码复杂度验证
- 支持两种验证模式:简单模式(5-20位)和复杂模式(10-16位,包含大小写字母、数字、特殊字符)
- 自动从系统配置获取验证规则
- 实时反馈密码验证结果
操作流程
- 密码提示 → 点击修改 → 输入新密码 → 验证通过 → 保存修改 → 自动刷新页面
- 修改成功后显示成功提示
- 操作流程简洁明了,用户体验友好
密码提示类型说明
| 提示类型值 | 描述 | 显示内容 | 操作选项 |
|---|---|---|---|
1 | 密码过于简单 | 当前密码过于简单,为了您的账户安全建议修改密码。 | 立即修改 / 下次再说(可关闭) |
2 | 密码即将过期 | 密码马上过期,请及时修改密码 | 立即修改 / 下次再说(可关闭) |
3 | 密码已过期 | 密码已过期,请修改密码 | 立即修改(不可关闭) |
0 | 无需提示 | 不显示提示对话框 | - |
TIP
- 组件会在页面加载时自动检测用户密码状态,无需手动触发。
- 密码复杂度验证规则通过系统配置获取,需要确保
mapLoginSwitchAPI 可用。 - 密码修改成功后会自动刷新页面,确保用户使用新密码重新登录。
- 密码已过期时,用户必须修改密码才能继续使用系统。
- 组件使用了
wit-dialog、el-input等依赖组件,使用前请确保已正确导入。
