mod:登录弹出框

frontend/src/App.vue

@@ -8,6 +8,9 @@
       </keep-alive>
     </router-view>
 
+    <Login v-model:dialogVisible="useUserInfoStore.loginShow" />
+
+
 
   </div>
 </template>

frontend/src/apis/user.ts

@@ -11,6 +11,8 @@ export async function login(data:UserRequest){
 }
 
 
+
+
 export function upload(params: any) {
     const form = new FormData()
     Object.keys(params).map((item) => {
@@ -27,4 +29,4 @@ export function upload(params: any) {
 export function sendCode(data:UserRequest) {
     return POST('/api/auth/send_code',data)
   }
-  
+

frontend/src/components/login/index.vue

@@ -18,9 +18,8 @@
       </el-tabs>
 
       <el-form
-        :model="loginForm"  
+        :model="loginForm"
         :rules="loginRules"
-        autocomplete="on"
         label-position="left"
       >
         <div class="title__main">欢迎！</div>
@@ -156,22 +155,15 @@ const loginRules = reactive({
   ]
 })
 
-
 const handleLogin = async () => {
-  const res = await login({
+
+  useUserInfoStore.login({
     "site":1,
     "username":loginForm.username,
     "password":loginForm.password,
     "type": activeTab.value,
     "device":"aigc-photo"
   })
-
-  const userRes = await getUserInfo({
-    "site":1,
-    "token":res.data.token
-  })
-
-  useUserInfoStore.updateUserInfo(userRes.data)
 }
 
 const sendVerificationCode = () => {

frontend/src/stores/modules/user.ts

@@ -1,5 +1,6 @@
 // src/stores/index.ts
 import { defineStore } from 'pinia';
+import { getUserInfo,login } from '@/apis/user'
 
 
 const useUserInfo = defineStore('userInfo', {
@@ -13,20 +14,51 @@ const useUserInfo = defineStore('userInfo', {
         updateUserInfo(data: any ) {
             this.userInfo = data;
         },
+        // 添加必要的 actions
+        updateToken(data: string ) {
+            this.token = data;
+        },
         updateLoginShow(data: boolean) {
             this.loginShow = data;
         },
+        async login(data: any ) {
+            return new Promise(async (resolve, reject) => {
+                const res = await login(data).catch(error => {
+                    reject(error)
+                })
+               await this.updateToken(res.data.token)
+               await this.getInfo()
+               this.updateLoginShow(false)
+               resolve(res)
+            })
+        },
+        async getInfo(){
+            return new Promise(async (resolve, reject) => {
+                const res = await  getUserInfo()
+                const { data } = res
+                if (!data) {
+                    this.updateToken({})
+                    reject('请重新登录!')
+                }
+                this.updateUserInfo(data)
+                resolve(data)
+
+            })
+        },
+        loginExtra(){
+
+        }
     },
     getters: {
         // 添加必要的 getters
-        getFullName(state): string {
-            return `${state.name}`;
+        getToken(state): string {
+            return state.token;
         }
     },
     persist: {
-        key: 'user-info',
+        key: 'userinfo',
         storage: localStorage,
-        paths: ['userInfo','token']
+        paths: ['token']
     }
 });
 

frontend/src/utils/http.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
 import { ElMessage as Message, ElMessageBox as MessageBox, ElLoading as Loading } from 'element-plus';
+import  useUserInfo  from '@/stores/modules/user'; // 引入 useUserInfo store
 
 // 加载动画的并发管理
 const activeRequests = new Set<string>();
@@ -28,7 +29,8 @@ const service = axios.create({
 service.interceptors.request.use(
     (config: AxiosRequestConfig) => {
         // 在发送请求之前做些什么，例如添加 token
-        const token = localStorage.getItem('token');
+        const userInfoStore = useUserInfo();
+        const token = userInfoStore.getToken; // 使用 getToken() 获取 token
         if (token) {
             config.headers['Authorization'] = `Bearer ${token}`;
         }