Commit dcd9aa2d authored by 刘帅's avatar 刘帅

1.修改密码优化,增加弱密码校验

2.登录页增加扫码下载APP二维码
parent 8e1c21c1
...@@ -54,9 +54,21 @@ ...@@ -54,9 +54,21 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 右下角二维码展示框 -->
<div class="qr-code-container">
<div class="qr-code-box">
<div class="qr-code-title">扫码下载APP</div>
<div class="qr-code-image">
<!-- 这里可以替换为实际的二维码图片 -->
<img src="../assets/qr/qr.png" alt="APP下载二维码">
</div>
</div>
</div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<!-- <span>Copyright © 2018-2023 All Rights Reserved.</span>--> <!-- <span>Copyright © 2018-2023 All Rights Reserved.</span>-->
</div> </div>
</div> </div>
</template> </template>
...@@ -163,6 +175,7 @@ export default { ...@@ -163,6 +175,7 @@ export default {
height: 100%; height: 100%;
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: cover;
position: relative;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
...@@ -216,4 +229,50 @@ export default { ...@@ -216,4 +229,50 @@ export default {
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
/* 右下角二维码样式 */
.qr-code-container {
position: fixed;
right: 20px;
bottom: 60px;
z-index: 100;
}
.qr-code-box {
width: 140px;
padding: 12px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
.qr-code-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.qr-code-image {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eaeaea;
img {
max-width: 100%;
max-height: 100%;
}
}
.qr-code-text {
font-size: 12px;
color: #666;
margin-top: 8px;
}
</style> </style>
...@@ -4,7 +4,16 @@ ...@@ -4,7 +4,16 @@
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/> <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newPassword"> <el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/> <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password @input="checkPasswordStrength"/>
<div v-if="user.newPassword" class="password-strength">
<div :class="['strength-bar', strengthClass]"></div>
</div>
<div v-if="user.newPassword" class="password-tips">
密码强度: {{ strengthText }}
<div v-if="user.newPassword && !isPasswordStrong" class="weak-password-tips">
密码必须包含大写字母、小写字母、数字和特殊字符
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="confirmPassword"> <el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/> <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
...@@ -21,6 +30,27 @@ import { updateUserPwd } from "@/api/system/user"; ...@@ -21,6 +30,27 @@ import { updateUserPwd } from "@/api/system/user";
export default { export default {
data() { data() {
// 验证密码复杂度
const validatePasswordComplexity = (rule, value, callback) => {
if (!value) {
callback(new Error("新密码不能为空"));
return;
}
// 检查密码复杂度
const hasLowerCase = /[a-z]/.test(value);
const hasUpperCase = /[A-Z]/.test(value);
const hasNumber = /[0-9]/.test(value);
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
if (!hasLowerCase || !hasUpperCase || !hasNumber || !hasSpecialChar) {
callback(new Error("密码必须包含大小写字母、数字和特殊字符"));
return;
}
callback();
};
const equalToPassword = (rule, value, callback) => { const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) { if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致")); callback(new Error("两次输入的密码不一致"));
...@@ -28,12 +58,16 @@ export default { ...@@ -28,12 +58,16 @@ export default {
callback(); callback();
} }
}; };
return { return {
user: { user: {
oldPassword: undefined, oldPassword: undefined,
newPassword: undefined, newPassword: undefined,
confirmPassword: undefined confirmPassword: undefined
}, },
strengthClass: 'weak',
strengthText: '',
isPasswordStrong: false,
// 表单校验 // 表单校验
rules: { rules: {
oldPassword: [ oldPassword: [
...@@ -41,7 +75,8 @@ export default { ...@@ -41,7 +75,8 @@ export default {
], ],
newPassword: [ newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" }, { required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" } { min: 8, message: "密码长度至少为8个字符", trigger: "blur" },
{ validator: validatePasswordComplexity, trigger: "blur" }
], ],
confirmPassword: [ confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, message: "确认密码不能为空", trigger: "blur" },
...@@ -51,9 +86,56 @@ export default { ...@@ -51,9 +86,56 @@ export default {
}; };
}, },
methods: { methods: {
// 检查密码强度
checkPasswordStrength() {
if (!this.user.newPassword) {
this.strengthClass = 'weak';
this.strengthText = '';
this.isPasswordStrong = false;
return;
}
let strength = 0;
// 长度检查
if (this.user.newPassword.length >= 8) strength++;
// 包含小写字母
if (/[a-z]/.test(this.user.newPassword)) strength++;
// 包含大写字母
if (/[A-Z]/.test(this.user.newPassword)) strength++;
// 包含数字
if (/[0-9]/.test(this.user.newPassword)) strength++;
// 包含特殊字符
if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(this.user.newPassword)) strength++;
// 设置强度等级
if (strength <= 2) {
this.strengthClass = 'weak';
this.strengthText = '';
this.isPasswordStrong = false;
} else if (strength <= 4) {
this.strengthClass = 'medium';
this.strengthText = '';
this.isPasswordStrong = false;
} else {
this.strengthClass = 'strong';
this.strengthText = '';
this.isPasswordStrong = true;
}
},
submit() { submit() {
this.$refs["form"].validate(valid => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
// 再次确认密码强度
if (!this.isPasswordStrong) {
this.$message.error("密码强度不足,请确保包含大小写字母、数字和特殊字符");
return;
}
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => { updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
}); });
...@@ -66,3 +148,44 @@ export default { ...@@ -66,3 +148,44 @@ export default {
} }
}; };
</script> </script>
<style scoped>
.password-strength {
height: 6px;
margin-top: 8px;
background: #eee;
border-radius: 3px;
overflow: hidden;
}
.strength-bar {
height: 100%;
transition: all 0.3s ease;
}
.strength-bar.weak {
width: 33%;
background: #f56c6c;
}
.strength-bar.medium {
width: 66%;
background: #e6a23c;
}
.strength-bar.strong {
width: 100%;
background: #67c23a;
}
.password-tips {
font-size: 12px;
color: #909399;
margin-top: 6px;
}
.weak-password-tips {
color: #f56c6c;
margin-top: 4px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment