bonus
/
search_tools_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加密码校验

This commit is contained in:
BianLzhaoMin 2025-05-07 08:42:51 +08:00
parent 3d160d29c4
commit 75e50cd13f
4 changed files with 1055 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/Navbar.vue
View File

@ -12,7 +12,7 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="device !== 'mobile'"> <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" /> <!-- <search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
@ -20,7 +20,7 @@
<el-tooltip content="文档地址" effect="dark" placement="bottom"> <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />

370
src/views/login.vue
View File

@ -1,220 +1,214 @@
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">{{title}}</h3> <h3 class="title">{{ title }}</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
v-model="loginForm.username" <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
type="text" </el-input>
auto-complete="off" </el-form-item>
placeholder="账号" <el-form-item prop="password">
> <el-input
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> v-model="loginForm.password"
</el-input> type="password"
</el-form-item> auto-complete="off"
<el-form-item prop="password"> placeholder="密码"
<el-input @keyup.enter.native="handleLogin"
v-model="loginForm.password" >
type="password" <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
auto-complete="off" </el-input>
placeholder="密码" </el-form-item>
@keyup.enter.native="handleLogin" <el-form-item prop="code" v-if="captchaEnabled">
> <el-input
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> v-model="loginForm.code"
</el-input> auto-complete="off"
</el-form-item> placeholder="验证码"
<el-form-item prop="code" v-if="captchaEnabled"> style="width: 63%"
<el-input @keyup.enter.native="handleLogin"
v-model="loginForm.code" >
auto-complete="off" <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
placeholder="验证码" </el-input>
style="width: 63%" <div class="login-code">
@keyup.enter.native="handleLogin" <img :src="codeUrl" @click="getCode" class="login-code-img" />
> </div>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> </el-form-item>
</el-input> <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
<div class="login-code"> <el-form-item style="width: 100%">
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <el-button
</div> :loading="loading"
</el-form-item> size="medium"
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> type="primary"
<el-form-item style="width:100%;"> style="width: 100%"
<el-button @click.native.prevent="handleLogin"
:loading="loading" >
size="medium" <span v-if="!loading">登 录</span>
type="primary" <span v-else>登 录 中...</span>
style="width:100%;" </el-button>
@click.native.prevent="handleLogin" <div style="float: right" v-if="register">
> <router-link class="link-type" :to="'/register'">立即注册</router-link>
<span v-if="!loading">登 录</span> </div>
<span v-else>登 录 中...</span> </el-form-item>
</el-button> </el-form>
<div style="float: right;" v-if="register"> <!-- 底部 -->
<router-link class="link-type" :to="'/register'">立即注册</router-link> <!-- <div class="el-login-footer">
</div> <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
</el-form-item> </div> -->
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
</div> </div>
</div>
</template> </template>
<script> <script>
import { getCodeImg } from "@/api/login"; import { getCodeImg } from '@/api/login'
import Cookies from "js-cookie"; import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
export default { export default {
name: "Login", name: 'Login',
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
codeUrl: "", codeUrl: '',
loginForm: { loginForm: {
username: "admin", username: 'admin',
password: "admin123", password: 'admin123',
rememberMe: false, rememberMe: false,
code: "", code: '',
uuid: "" uuid: '',
}, },
loginRules: { loginRules: {
username: [ username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
{ required: true, trigger: "blur", message: "请输入您的账号" } password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
], code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
password: [ },
{ required: true, trigger: "blur", message: "请输入您的密码" } loading: false,
], // 验证码开关
code: [{ required: true, trigger: "change", message: "请输入验证码" }] captchaEnabled: true,
}, // 注册开关
loading: false, register: false,
// 验证码开关 redirect: undefined,
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.getCode();
this.getCookie();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
} }
});
}, },
getCookie() { watch: {
const username = Cookies.get("username"); $route: {
const password = Cookies.get("password"); handler: function (route) {
const rememberMe = Cookies.get('rememberMe') this.redirect = route.query && route.query.redirect
this.loginForm = { },
username: username === undefined ? this.loginForm.username : username, immediate: true,
password: password === undefined ? this.loginForm.password : decrypt(password), },
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
}, },
handleLogin() { created() {
this.$refs.loginForm.validate(valid => { this.getCode()
if (valid) { this.getCookie()
this.loading = true; },
if (this.loginForm.rememberMe) { methods: {
Cookies.set("username", this.loginForm.username, { expires: 30 }); getCode() {
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); getCodeImg().then((res) => {
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
} else { if (this.captchaEnabled) {
Cookies.remove("username"); this.codeUrl = 'data:image/gif;base64,' + res.img
Cookies.remove("password"); this.loginForm.uuid = res.uuid
Cookies.remove('rememberMe'); }
} })
this.$store.dispatch("Login", this.loginForm).then(() => { },
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); getCookie() {
}).catch(() => { const username = Cookies.get('username')
this.loading = false; const password = Cookies.get('password')
if (this.captchaEnabled) { const rememberMe = Cookies.get('rememberMe')
this.getCode(); this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
} }
}); },
} handleLogin() {
}); this.$refs.loginForm.validate((valid) => {
} if (valid) {
} this.loading = true
}; if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, { expires: 30 })
Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store
.dispatch('Login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/' }).catch(() => {})
})
.catch(() => {
this.loading = false
if (this.captchaEnabled) {
this.getCode()
}
})
}
})
},
},
}
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.login { .login {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
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;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
} }
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: Arial; font-family: Arial;
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
</style> </style>

1347
src/views/system/user/index.vue
View File

File diff suppressed because it is too large Load Diff

123
src/views/system/user/profile/resetPwd.vue
View File

@ -1,69 +1,72 @@
<template> <template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px"> <el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword"> <el-form-item label="旧密码" prop="oldPassword">
<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 />
</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 />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button> <el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button> <el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
import { updateUserPwd } from "@/api/system/user"; import { updateUserPwd } from '@/api/system/user'
export default { export default {
data() { data() {
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('两次输入的密码不一致'))
} else { } else {
callback(); callback()
} }
}; }
return { return {
user: { user: {
oldPassword: undefined, oldPassword: undefined,
newPassword: undefined, newPassword: undefined,
confirmPassword: undefined confirmPassword: undefined,
}, },
// 表单校验 // 表单校验
rules: { rules: {
oldPassword: [ oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
{ required: true, message: "旧密码不能为空", trigger: "blur" } newPassword: [
], { required: true, message: '新密码不能为空', trigger: 'blur' },
newPassword: [ // { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
{ required: true, message: "新密码不能为空", trigger: "blur" }, // { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }, {
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" } pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/,
], message: '密码要求8-16位，包含大小写字母、数字、特殊字符',
confirmPassword: [ trigger: 'blur',
{ required: true, message: "确认密码不能为空", trigger: "blur" }, },
{ required: true, validator: equalToPassword, trigger: "blur" } ],
] confirmPassword: [
} { required: true, message: '确认密码不能为空', trigger: 'blur' },
}; { required: true, validator: equalToPassword, trigger: 'blur' },
}, ],
methods: { },
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
} }
});
}, },
close() { methods: {
this.$tab.closePage(); submit() {
} this.$refs['form'].validate((valid) => {
} if (valid) {
}; updateUserPwd(this.user.oldPassword, this.user.newPassword).then((response) => {
this.$modal.msgSuccess('修改成功')
})
}
})
},
close() {
this.$tab.closePage()
},
},
}
</script> </script>