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

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')

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">

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 userStore = useUserStore();
-const router = useRouter()
+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()
+    userStore.logout();
-    router.push('/user/login')
+    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

@@ -1,5 +1,7 @@
 <template>
+    <div>
         <nuxt-page></nuxt-page>
+    </div>
 </template>
 
 <script setup lang="ts">

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>

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;

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 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()
 
-    // 查询用户
+    try {
-    const userDB = new BetterSqlite3('./userData/db/user.db');
+        // 验证 Token
-    const user: any = userDB.prepare('SELECT * FROM user WHERE id = ?').get(userId);
+        const decoded = jwt.verify(token, jwtSecret) as any;
-    if (!user || !bcrypt.compareSync(oldPassword, user.password)) {
+        const username = decoded.username;
+        const userDB = BetterSqlite3('./userData/db/user.db');
+
+        // 查找用户
+        const user: any = userDB.prepare('SELECT * FROM user WHERE username =?').get(username);
+        if (!user) {
+            userDB.close();
+            throw createError({ statusCode: 404, statusMessage: 'User not found' });
+        }
+
+        // 验证旧密码是否正确
+        // const passwordMatch = bcrypt.compareSync(oldPassword, user.password);
+        const passwordMatch = oldPassword === user.password;
+        if (!passwordMatch) {
             userDB.close();
             throw createError({ statusCode: 401, statusMessage: 'Invalid old password' });
         }
 
         // 哈希新密码
-    const salt = bcrypt.genSaltSync(10);
+        // const salt = bcrypt.genSaltSync(10);
-    const hashedPassword = bcrypt.hashSync(newPassword, salt);
+        // const hashedNewPassword = bcrypt.hashSync(newPassword, salt);
+
+        const hashedNewPassword = newPassword;
 
         // 更新密码
-    userDB.prepare('UPDATE user SET password = ? WHERE id = ?').run(hashedPassword, userId);
+        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
+        // 重新生成 JWT
-    const token = createToken({ userId, password: user.password, username: user.username });
+        const newToken = jwt.sign({
+            username: decoded.username,
+            password: hashedNewPassword,
+            userId: decoded.userId,
+        }, jwtSecret, { expiresIn: '168h' });
 
         userDB.close();
 
-    return { token , expiresIn: Date.now() + 168 * 60 * 60 * 1000 };
+        return { token: newToken, expiresIn: Date.now() + 168 * 60 * 60 * 1000 };
+    } catch (err) {
+        return { statusCode: 401, statusMessage: 'Token invalid or expired', data: { err, token } };
+    }
 });