From f9007913737f129b57ddeb212d2acc521ce55342 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Fri, 17 Jan 2025 02:12:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD=EF=BC=88=E5=BD=93=E7=84=B6?=
 =?UTF-8?q?=E6=95=B4=E4=B8=AA=E8=B4=A6=E6=88=B7=E5=8A=9F=E8=83=BD=E7=9B=AE?=
 =?UTF-8?q?=E5=89=8D=E4=BB=8D=E7=84=B6=E6=AE=8B=E7=BC=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/index.vue              |   3 +
 pages/user/main.vue               |   2 +-
 pages/user/main/account.vue       | 111 ++++++++++++++++++++++++++++--
 pages/user/main/post.vue          |   4 +-
 pages/user/main/post/index.vue    |  12 +++-
 pages/user/main/server.vue        |   2 +
 server/api/user/updatePassword.ts |  73 ++++++++++++++------
 7 files changed, 175 insertions(+), 32 deletions(-)

diff --git a/pages/user/index.vue b/pages/user/index.vue
index bbf61cd..71c6ce5 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -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')
diff --git a/pages/user/main.vue b/pages/user/main.vue
index 79dfea3..69dba1e 100644
--- a/pages/user/main.vue
+++ b/pages/user/main.vue
@@ -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">
diff --git a/pages/user/main/account.vue b/pages/user/main/account.vue
index 62bfccc..ed8adc6 100644
--- a/pages/user/main/account.vue
+++ b/pages/user/main/account.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/user/main/post.vue b/pages/user/main/post.vue
index 1e324ec..d850932 100644
--- a/pages/user/main/post.vue
+++ b/pages/user/main/post.vue
@@ -1,5 +1,7 @@
 <template>
-    <nuxt-page></nuxt-page>
+    <div>
+        <nuxt-page></nuxt-page>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/user/main/post/index.vue b/pages/user/main/post/index.vue
index 7cbc54c..2b6fdfb 100644
--- a/pages/user/main/post/index.vue
+++ b/pages/user/main/post/index.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/user/main/server.vue b/pages/user/main/server.vue
index 8068697..3c95c34 100644
--- a/pages/user/main/server.vue
+++ b/pages/user/main/server.vue
@@ -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;
diff --git a/server/api/user/updatePassword.ts b/server/api/user/updatePassword.ts
index b0d151b..861bffc 100644
--- a/server/api/user/updatePassword.ts
+++ b/server/api/user/updatePassword.ts
@@ -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 } };
+    }
 });
\ No newline at end of file