feat: 用户登陆修改密码
This commit is contained in:
dataeaseShu
parent
a4c6c99460
commit
5c2da88248
@ -6,17 +6,42 @@
|
||||
ref="de-theme"
|
||||
component-name="ThemeSetting"
|
||||
/>
|
||||
<el-dialog
|
||||
:visible.sync="showPasswordModifiedDialog"
|
||||
append-to-body
|
||||
:title="$t('user.change_password')"
|
||||
:show-close="false"
|
||||
>
|
||||
<PasswordUpdateForm oldPwd="DataEase" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import { mapState } from 'vuex'
|
||||
import PasswordUpdateForm from '@/views/system/user/PasswordUpdateForm.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: { PluginCom },
|
||||
beforeCreate() {
|
||||
|
||||
components: { PluginCom, PasswordUpdateForm },
|
||||
computed: {
|
||||
...mapState('user', [
|
||||
'passwordModified',
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPasswordModifiedDialog: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
passwordModified: {
|
||||
handler(val) {
|
||||
this.showPasswordModifiedDialog = !val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -13,6 +13,7 @@ const getDefaultState = () => {
|
||||
name: '',
|
||||
user: {},
|
||||
roles: [],
|
||||
passwordModified: true,
|
||||
avatar: '',
|
||||
// 第一次加载菜单时用到
|
||||
loadMenus: false,
|
||||
@ -66,7 +67,10 @@ const mutations = {
|
||||
if (language && i18n.locale !== language) {
|
||||
i18n.locale = language
|
||||
}
|
||||
}
|
||||
},
|
||||
SET_PASSWORD_MODIFIED: (state, passwordModified) => {
|
||||
state.passwordModified = passwordModified
|
||||
},
|
||||
}
|
||||
|
||||
const actions = {
|
||||
|
||||
111
frontend/src/views/system/user/PasswordUpdateForm.vue
Normal file
111
frontend/src/views/system/user/PasswordUpdateForm.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="createUserForm"
|
||||
:model="form"
|
||||
:rules="rule"
|
||||
size="small"
|
||||
label-width="auto"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item v-if="!oldPwd" :label="$t('user.origin_passwd')" prop="oldPwd">
|
||||
<dePwd v-model="form.oldPwd" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.new_passwd')" prop="newPwd">
|
||||
<dePwd v-model="form.newPwd" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('user.confirm_passwd')" prop="repeatPwd">
|
||||
<dePwd v-model="form.repeatPwd" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="save">{{
|
||||
$t('commons.confirm')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updatePersonPwd } from '@/api/system/user'
|
||||
import dePwd from '@/components/deCustomCm/DePwd.vue'
|
||||
export default {
|
||||
name: 'PasswordUpdateForm',
|
||||
components: { dePwd },
|
||||
props: {
|
||||
oldPwd: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
rule: {
|
||||
oldPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('user.input_password'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
newPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('user.input_password'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
|
||||
message: this.$t('member.password_format_is_incorrect'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
repeatPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('user.input_password'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ required: true, trigger: 'blur', validator: this.repeatValidator }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.oldPwd) {
|
||||
this.form.oldPwd = this.oldPwd
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
repeatValidator(rule, value, callback) {
|
||||
if (value !== this.form.newPwd) {
|
||||
callback(new Error(this.$t('member.inconsistent_passwords')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$refs.createUserForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const param = {
|
||||
password: this.form.oldPwd,
|
||||
newPassword: this.form.newPwd
|
||||
}
|
||||
updatePersonPwd(param).then((res) => {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.$store.commit('user/SET_PASSWORD_MODIFIED', true)
|
||||
this.logout()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async logout() {
|
||||
await this.$store.dispatch('user/logout')
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -5,45 +5,7 @@
|
||||
<div class="form-header">
|
||||
<span>{{ $t('user.change_password') }}</span>
|
||||
</div>
|
||||
<el-form
|
||||
ref="createUserForm"
|
||||
:model="form"
|
||||
:rules="rule"
|
||||
size="small"
|
||||
label-width="auto"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item
|
||||
:label="$t('user.origin_passwd')"
|
||||
prop="oldPwd"
|
||||
>
|
||||
<dePwd
|
||||
v-model="form.oldPwd"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('user.new_passwd')"
|
||||
prop="newPwd"
|
||||
>
|
||||
<dePwd
|
||||
v-model="form.newPwd"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('user.confirm_passwd')"
|
||||
prop="repeatPwd"
|
||||
>
|
||||
<dePwd
|
||||
v-model="form.repeatPwd"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="save"
|
||||
>{{ $t('commons.confirm') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<PasswordUpdateForm />
|
||||
</el-card>
|
||||
</div>
|
||||
</layout-content>
|
||||
@ -51,39 +13,9 @@
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import { updatePersonPwd } from '@/api/system/user'
|
||||
import dePwd from '@/components/deCustomCm/DePwd.vue'
|
||||
import PasswordUpdateForm from './PasswordUpdateForm'
|
||||
export default {
|
||||
|
||||
components: { LayoutContent, dePwd },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
|
||||
},
|
||||
rule: {
|
||||
|
||||
oldPwd: [
|
||||
{ required: true, message: this.$t('user.input_password'), trigger: 'blur' }
|
||||
],
|
||||
newPwd: [
|
||||
{ required: true, message: this.$t('user.input_password'), trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
|
||||
message: this.$t('member.password_format_is_incorrect'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
repeatPwd: [
|
||||
{ required: true, message: this.$t('user.input_password'), trigger: 'blur' },
|
||||
{ required: true, trigger: 'blur', validator: this.repeatValidator }
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
components: { LayoutContent, PasswordUpdateForm },
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('app/toggleSideBarHide', true)
|
||||
@ -92,36 +24,6 @@ export default {
|
||||
created() {
|
||||
this.$store.dispatch('app/toggleSideBarHide', true)
|
||||
},
|
||||
methods: {
|
||||
repeatValidator(rule, value, callback) {
|
||||
if (value !== this.form.newPwd) {
|
||||
callback(new Error(this.$t('member.inconsistent_passwords')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$refs.createUserForm.validate(valid => {
|
||||
if (valid) {
|
||||
const param = {
|
||||
password: this.form.oldPwd,
|
||||
newPassword: this.form.newPwd
|
||||
}
|
||||
updatePersonPwd(param).then(res => {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.logout()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async logout() {
|
||||
await this.$store.dispatch('user/logout')
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user