|
发表于 2024-6-28 14:15:27
|
显示全部楼层
<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" @submit.prevent="updatePassword" class="password-form" label-width="100px" size="large">
<el-form-item label="旧密码">
<el-input v-model="passwordData.old_pwd" type="password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="新密码">
<el-input v-model="passwordData.new_pwd" type="password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认新密码">
<el-input v-model="passwordData.re_pwd" type="password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updatePassword">修改密码</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { updateUserPasswordService } from '@/api/user';
import { useTokenStore } from '@/stores/token';
const router = useRouter();
const passwordData = ref({
old_pwd: '',
new_pwd: '',
re_pwd: ''
});
const tokenStore = useTokenStore();
const updatePassword = async () => {
if (passwordData.value.new_pwd !== passwordData.value.re_pwd) {
ElMessage.error('两次输入的密码不一致');
return;
}
try {
let result = await updateUserPasswordService(passwordData.value);
if (result.data && result.data.success) {
ElMessage.success(result.message ? result.message : '密码修改成功');
await tokenStore.removeToken();
router.push('/login');
} else {
ElMessage.error(result.message ? result.message : '密码修改失败');
}
} catch (error) {
ElMessage.error('密码修改失败:' + (error.message || '未知错误'));
}
};
</script>
<style scoped>
</style>
/**
* 修改用户密码
*/
export const updateUserPasswordService = (passwordData) => {
return request.patch('/user/updatePwd', passwordData)
}
import { defineStore } from "pinia";
import {ref} from 'vue';
/*
defineStore参数描述:
第一个参数:给状态起名,具有唯一性
第二个参数:函数,可以把定义该状态中拥有的内容
defineStore返回值描述:
返回的是一个函数,将来可以调用该函数,得到第二个参数中返回的内容
*/
export const useTokenStore = defineStore('token',()=>{
//1.定义描述token
const token = ref('')
//2.定义修改token的方法
const setToken = (newToken)=>{
token.value = newToken
}
//3.定义移除token的方法
const removeToken = ()=>{
token.value=''
}
return {
token,setToken,removeToken
}
},{
persistedState:true //持久化存储token
})
目前这个修改密码功能有问题
点击修改密码后 后端代码能够输出正确的数据库执行代码,能够修改成功
但是前端没有跳转到登录界面,同时elemessage没有提示正确的修改成功消息 |
|