From 89d94ef6946a91b01a52c9c52916d9a8049e3d90 Mon Sep 17 00:00:00 2001
From: carry <2641257231@qq.com>
Date: Sat, 15 Feb 2025 16:51:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=BA=86=E8=8B=A5=E5=B9=B2?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=EF=BC=8C=E7=A8=8B=E5=BA=8F=E7=BB=88=E4=BA=8E?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E8=B7=91=E8=B5=B7=E6=9D=A5=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue              |  5 ++--
 src/main.ts              | 43 ++++++++++++++++++++++++++++++++-
 src/store/userStore.ts   | 34 +++-----------------------
 src/views/LoginPage.vue  | 52 ++++++++++++++++++++++++++++++++++++++++
 src/views/ManagePage.vue | 11 +++++++++
 5 files changed, 110 insertions(+), 35 deletions(-)
 create mode 100644 src/views/LoginPage.vue
 create mode 100644 src/views/ManagePage.vue

diff --git a/src/App.vue b/src/App.vue
index 85af715..ad45c7c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
-
+  <RouterView />
 </template>
 
 <style scoped>
-
 </style>
diff --git a/src/main.ts b/src/main.ts
index 2425c0f..3db58d3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,46 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import './style.css'
 import App from './App.vue'
+import router from './router'
+import apiClient from './api/axiosInstance'
+import { userStore } from './store/userStore'
 
-createApp(App).mount('#app')
+const pinia = createPinia()
+
+const app = createApp(App)
+
+// 配置路由和状态管理
+app.use(router)
+app.use(pinia)
+app.use(ElementPlus)
+
+// 初始化userStore
+const store = userStore()
+
+// 使用插件进行持久化，监听 store 变化并保存到本地存储
+store.$subscribe((mutation, state) => {
+  localStorage.setItem('authStore', JSON.stringify(state));
+});
+
+// 监听 action 执行，登录和刷新令牌后保存状态到本地存储
+store.$onAction(({ name, store, args, after, onError }) => {
+  if (name === 'login' || name === 'refreshTokenMethod') {
+    after(() => {
+      localStorage.setItem('authStore', JSON.stringify(store.$state));
+    });
+  }
+});
+
+// 初始化时从本地存储恢复状态
+const persistedState = JSON.parse(localStorage.getItem('authStore') || '{}');
+if (persistedState.accessToken && persistedState.refreshTokenToken && persistedState.role && persistedState.username && persistedState.userId !== null) {
+  store.$patch(persistedState);
+}
+
+// 设置axios拦截器
+apiClient
+
+app.mount('#app')
diff --git a/src/store/userStore.ts b/src/store/userStore.ts
index dca6cca..d28381c 100644
--- a/src/store/userStore.ts
+++ b/src/store/userStore.ts
@@ -1,16 +1,10 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { authService } from '../api/authService';
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import { createPinia } from 'pinia';
 import { jwtDecode } from 'jwt-decode';
 
-// 创建 Pinia 实例并使用持久化插件
-const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
-
-// 定义 auth store，包含用户认证相关状态和方法
-export const userStore = defineStore('auth', () => {
+// 定义 store，包含用户认证相关状态和方法
+export const userStore = defineStore('user', () => {
   const accessToken = ref('');
   const refreshToken = ref('');
   const role = ref('');
@@ -65,26 +59,4 @@ export const userStore = defineStore('auth', () => {
   }
 
   return { accessToken, refreshTokenToken: refreshToken, role, username, userId, isLoggedIn, login, logout, refreshTokenMethod };
-}, {
-  persist: true,
-});
-
-// 使用插件进行持久化，监听 store 变化并保存到本地存储
-userStore().$subscribe((mutation, state) => {
-  localStorage.setItem('authStore', JSON.stringify(state));
-});
-
-// 监听 action 执行，登录和刷新令牌后保存状态到本地存储
-userStore().$onAction(({ name, store, args, after, onError }) => {
-  if (name === 'login' || name === 'refreshTokenMethod') {
-    after(() => {
-      localStorage.setItem('authStore', JSON.stringify(store.$state));
-    });
-  }
-});
-
-// 初始化时从本地存储恢复状态
-const persistedState = JSON.parse(localStorage.getItem('authStore') || '{}');
-if (persistedState.accessToken && persistedState.refreshTokenToken && persistedState.role && persistedState.username && persistedState.userId !== null) {
-  userStore().$patch(persistedState);
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
new file mode 100644
index 0000000..d964336
--- /dev/null
+++ b/src/views/LoginPage.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="login-container">
+    <el-form :model="form" label-width="80px">
+      <el-form-item label="用户名">
+        <el-input v-model="form.username" />
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="form.password" type="password" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleLogin">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { userStore } from '@/store/userStore'
+import { ElMessage } from 'element-plus'
+
+interface LoginForm {
+  username: string
+  password: string
+}
+
+const router = useRouter()
+const store = userStore()
+
+const form = ref<LoginForm>({
+  username: '',
+  password: ''
+})
+
+const handleLogin = async () => {
+  try {
+    const { username, password } = form.value
+    await store.login(username, password)
+    router.push({ name: 'manage' })
+  } catch (error) {
+    ElMessage.error('登录失败，请检查用户名和密码')
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  max-width: 400px;
+  margin: 100px auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue
new file mode 100644
index 0000000..6346205
--- /dev/null
+++ b/src/views/ManagePage.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file