539943419/miaoBlog
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加修改密码功能（当然整个账户功能目前仍然残缺）

Browse Source
This commit is contained in:
539943419 committed 2025-01-17 02:12:34 +08:00
1 parent 78dce18d9c
commit f900791373
7 files changed
+175 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/user/index.vue
+3
View File
@@ -12,6 +12,7 @@
<script setup lang="ts">
import useUserStore from '~/hooks/pinia/useUserStore';
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
@@ -41,6 +42,8 @@ onBeforeMount(async () => {
userStore.setToken(response.token)
userStore.setTokenExpireTime(response.expiresIn)
userStore.setLoginStatus(true)
// // if(route.)
// console.log(route)
router.replace('/user/main')
} else {
router.replace('/user/login')
pages/user/main.vue
+1 -1
View File
@@ -22,7 +22,7 @@
</div>
<div class="user-content">
<el-scrollbar>
<router-view></router-view>
<nuxt-page></nuxt-page>
</el-scrollbar>
</div>
<div class="user-bottom-bar">
pages/user/main/account.vue
+104 -7
View File
@@ -1,24 +1,121 @@
<template>
<div class="account-main">
<el-button @click="handleLogout">登出</el-button>
<el-container>
<el-header>
<h1>账户设置</h1>
</el-header>
<el-main>
<el-divider content-position="left">
<h2>修改密码</h2>
</el-divider>
<p>请输入原密码和新密码以修改密码</p>
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-input v-model="oldPassword" placeholder="原密码" type="password" show-password />
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-input v-model="newPassword" placeholder="新密码" type="password" show-password />
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-input v-model="newPasswordVerify" placeholder="再次输入新密码" type="password" show-password />
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button type="primary" @click="handleChangePassword" :disabled="disableChangingPassword">
修改密码
</el-button>
</el-col>
</el-row>
<el-divider content-position="left" style="margin: 40px 0;">
<h2>登出</h2>
</el-divider>
<el-row>
<!-- <el-col :span="4"></el-col> -->
<el-col :span="20">
<el-button @click="handleLogout">
登出
</el-button>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script setup>
import useUserStore from '~/hooks/pinia/useUserStore';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const userStore = useUserStore()
const router = useRouter()
const userStore = useUserStore();
const router = useRouter();
const oldPassword = ref('');
const newPassword = ref('');
const newPasswordVerify = ref('');
const disableChangingPassword = computed(() => {
return !oldPassword.value || !newPassword.value || !newPasswordVerify.value;
});
const handleChangePassword = async () => {
try {
if (newPassword.value !== newPasswordVerify.value) {
ElMessage.error('两次输入的新密码不一致');
return;
}
const response = await $fetch('/api/user/updatePassword', {
method: 'POST',
body: {
oldPassword: oldPassword.value,
newPassword: newPassword.value,
},
headers: {
Authorization: `Bearer ${userStore.token}`,
},
})
userStore.setToken(response.token);
userStore.setTokenExpireTime(response.expiresIn);
ElMessage.success('密码修改成功');
} catch (error) {
ElMessage.error('修改密码出错');
console.error('修改密码出错', error);
} finally {
}
};
const handleLogout = () => {
userStore.logout()
router.push('/user/login')
}
userStore.logout();
router.push('/user/login');
};
</script>
<style lang="scss" scoped>
.account-main {
position: relative;
padding: 10px 20px;
max-width: 800px;
margin: 0px auto;
h1 {
font-size: xx-large;
}
h2 {
font-size: larger;
}
p {
color: #595959;
// font-size: small;
}
}
.flex-end {
display: flex;
justify-content: flex-end;
}
</style>
pages/user/main/post.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<nuxt-page></nuxt-page>
<div>
<nuxt-page></nuxt-page>
</div>
</template>
<script setup lang="ts">
pages/user/main/post/index.vue
+10 -2
View File
@@ -6,7 +6,7 @@
<div class="post-index-list">
<el-card class="post-index-list-create" @click="handleNewPost">
<create class="post-index-list-create-icon"></create>
<div class="post-index-list-create-text">新建文章</div>
<div class="post-index-list-create-text">新文章</div>
</el-card>
<el-card class="post-index-list-card" v-for="post in postList" :key="post.id">
<template #header>
@@ -95,7 +95,7 @@ onMounted(async () => {
&-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
&-create {
@@ -193,4 +193,12 @@ onMounted(async () => {
// }
}
}
@media screen and (max-width: 768px) {
.post-index {
&-list {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}
}
</style>
pages/user/main/server.vue
+2
View File
@@ -99,6 +99,8 @@ onMounted(() => {
.user-server-config {
position: relative;
padding: 10px 20px;
max-width: 800px;
margin: 0px auto;
.server-upload {
border-radius: 6px;
cursor: pointer;
server/api/user/updatePassword.ts
+52 -21
View File
@@ -1,33 +1,64 @@
// import { defineEventHandler, readBody, createError } from 'h3';
import bcrypt from 'bcryptjs';
// import bcrypt from 'bcryptjs';
import BetterSqlite3 from 'better-sqlite3';
// 暂未实现
// import { defineEventHandler, createError, readBody } from 'h3';
import jwt from 'jsonwebtoken';
export default defineEventHandler(async (event) => {
const body = await readBody(event);
const { oldPassword, newPassword } = body;
const userId = event.context.user.id;
// 查询用户
const userDB = new BetterSqlite3('./userData/db/user.db');
const user: any = userDB.prepare('SELECT * FROM user WHERE id = ?').get(userId);
if (!user || !bcrypt.compareSync(oldPassword, user.password)) {
userDB.close();
throw createError({ statusCode: 401, statusMessage: 'Invalid old password' });
const jwtSecret = getKey();
const authHeader = event.headers.get('authorization');
if (!authHeader || !authHeader.startsWith('Bearer ')) {
throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
}
const token = authHeader.split('Bearer ')[1].trim()
// 哈希新密码
const salt = bcrypt.genSaltSync(10);
const hashedPassword = bcrypt.hashSync(newPassword, salt);
try {
// 验证 Token
const decoded = jwt.verify(token, jwtSecret) as any;
const username = decoded.username;
const userDB = BetterSqlite3('./userData/db/user.db');
// 更新密码
userDB.prepare('UPDATE user SET password = ? WHERE id = ?').run(hashedPassword, userId);
// 查找用户
const user: any = userDB.prepare('SELECT * FROM user WHERE username =?').get(username);
if (!user) {
userDB.close();
throw createError({ statusCode: 404, statusMessage: 'User not found' });
}
// 生成新的 JWT
const token = createToken({ userId, password: user.password, username: user.username });
// 验证旧密码是否正确
// const passwordMatch = bcrypt.compareSync(oldPassword, user.password);
const passwordMatch = oldPassword === user.password;
if (!passwordMatch) {
userDB.close();
throw createError({ statusCode: 401, statusMessage: 'Invalid old password' });
}
userDB.close();
// 哈希新密码
// const salt = bcrypt.genSaltSync(10);
// const hashedNewPassword = bcrypt.hashSync(newPassword, salt);
return { token , expiresIn: Date.now() + 168 * 60 * 60 * 1000 };
const hashedNewPassword = newPassword;
// 更新密码
const stmt = userDB.prepare('UPDATE user SET password =? WHERE username =?');
const result = stmt.run(hashedNewPassword, username);
if (result.changes === 0) {
userDB.close();
throw createError({ statusCode: 500, statusMessage: 'Failed to update password' });
}
// 重新生成 JWT
const newToken = jwt.sign({
username: decoded.username,
password: hashedNewPassword,
userId: decoded.userId,
}, jwtSecret, { expiresIn: '168h' });
userDB.close();
return { token: newToken, expiresIn: Date.now() + 168 * 60 * 60 * 1000 };
} catch (err) {
return { statusCode: 401, statusMessage: 'Token invalid or expired', data: { err, token } };
}
});