1.页面搭建
<script setup>
import { ref } from 'vue'
//调用路由进行跳转3
import {useRouter} from 'vue-router'
const router = useRouter()
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();
const userInfo = ref({...userInfoStore.info})
//定义数据模型
const passwordData = ref({
username:'',
old_pwd:'',
new_pwd:'',
re_pwd:''
})
//校验密码的函数
const checkRePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次确认密码'))
} else if (value !== passwordData.value.new_pwd) {
callback(new Error('请确保两次输入的密码一样'))
} else {
callback()
}
}
//定义表单校验规则
const rules = {
old_pwd: [
{ required: true, message: '请输入原密码', trigger: 'blur' },
{ min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
]
,
new_pwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
],
re_pwd: [
{ validator: checkRePassword, trigger: 'blur' }
]
}
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
//修改密码
import {userResetPasswordService} from '@/api/user.js'
import {ElMessage} from 'element-plus'
const updateUserPassword = async ()=>{
//调用接口
let result = await userResetPasswordService(passwordData.value);
//退出登录
//1.清空pinia中存储的token以及个人信息
tokenStore.removeToken()
//2.跳转到登录页面
router.push('/login')
ElMessage({
type: 'success',
message: '修改密码成功',
})
}
</script>
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>重置密码</span>
</div>
</template>
<el-row>
<el-col :span="12">
<el-form :model="passwordData" :rules="rules" label-width="100px" size="large">
<el-form-item label="原密码" prop="old_pwd" >
<el-input v-model="passwordData.old_pwd" type="password"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="new_pwd">
<el-input v-model="passwordData.new_pwd" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="re_pwd">
<el-input v-model="passwordData.re_pwd" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateUserPassword">提交修改</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</template>
2.添加接口函数
export const userResetPasswordService = (passwordData)=>{
return request.patch('/user/updatePwd',passwordData)
}