添加登录状态

Author: LisianthusLeaf

package-lock.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^1.7.8",
     "pinia": "^2.2.6",
+    "pinia-plugin-persistedstate": "^4.1.3",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5",
     "vuetify": "^3.7.5"

package.json

@@ -0,0 +1,71 @@
+import request from '@/util/request';
+
+// 登录
+export async function login(code:string,email:string):Promise<any>{
+    try {
+        const response = await request({
+            url: '/user/login',
+            method: "post",
+            params: {
+                code:code,
+                email:email
+            }
+        })
+        return response;
+    } catch (error) {
+        console.error('登录请求失败：', error);
+    }
+}
+// 登出
+export async function logout(code:string,email:string):Promise<any>{
+    try {
+        const response = await request({
+            url: '/user/logout',
+            method: "post",
+        })
+        return response;
+    } catch (error) {
+        console.error('登出请求失败：', error);
+    }
+}
+// 发送图片验证码
+export async function captcha():Promise<any>{
+    try {
+        const response = await request({
+            url: '/user/captcha',
+            method: "get",
+        })
+        return response;
+    } catch (error) {
+        console.error('发送图片验证码请求失败：', error);
+    }
+}
+// 发送邮箱验证码
+export async function sendCaptcha(email:string,pid:string,code:string):Promise<any>{
+    try {
+        const response = await request({
+            url: '/user/sendCaptcha',
+            method: "get",
+            data:{
+                email: email,
+                pid:pid,
+                code:code
+            }
+        })
+        return response;
+    } catch (error) {
+        console.error('发送邮箱验证码请求失败：', error);
+    }
+}
+// 获取当前登录用户信息
+export async function getInfo(code:string,email:string):Promise<any>{
+    try {
+        const response = await request({
+            url: '/user/getInfo',
+            method: "get",
+        })
+        return response;
+    } catch (error) {
+        console.error('获取用户信息请求失败：', error);
+    }
+}

src/api/login.ts

@@ -0,0 +1,5 @@
+export interface UserInfo {
+    id: string;
+    name: string;
+    avatar: string;
+}

src/api/login/api.ts

@@ -1,8 +1,6 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'
 
@@ -15,10 +13,15 @@ const vuetify = createVuetify({
     components:{VSnackbar},
     directives:{}
 })
+// Pinia
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 const app = createApp(App)
 
-app.use(createPinia())
+app.use(pinia)
 app.use(router)
 app.use(vuetify)
 

src/api/login/type.ts

@@ -0,0 +1,31 @@
+import { defineStore } from "pinia";
+
+import router from "@/router";
+import type {UserInfo} from "@/api/login/type.ts";
+
+export const useAuthStore = defineStore("auth", {
+  state: () => ({
+    isLoggedIn: false,
+    user: null as UserInfo | null
+  }),
+
+  persist: {
+    enabled: true,
+    strategies: [{ storage: localStorage, paths: ["isLoggedIn"] }],
+  },
+
+  getters: {},
+
+  actions: {
+    setLoggedIn(user: UserInfo) {
+      this.isLoggedIn = true;
+      this.user = user;
+      router.push("/");
+    },
+
+    logout() {
+      this.isLoggedIn = false;
+      router.push("/");
+    },
+  },
+});

src/main.ts

@@ -5,6 +5,7 @@ import Text from "@/components/normal/Text.vue";
 import router from "@/router";
 import Snackbar from "@/components/normal/Snackbar.vue";
 
+// 导航栏
 const currentIndex = ref(0)
 const tabs = [
   { name: 'market', component: MarketView },
@@ -13,6 +14,10 @@ const tabs = [
 const selectTab = (index: any) =>{
   currentIndex.value = index;
 }
+
+// 登陆状态
+import { useAuthStore } from "@/stores/authStore.ts";
+const authStore = useAuthStore();
 </script>
 
 <template>
@@ -34,7 +39,8 @@ const selectTab = (index: any) =>{
         </div>
       </nav>
       <nav class="side flex">
-        <button  @click="router.push('/login')">login</button>
+        <button v-if="!authStore.isLoggedIn" @click="router.push('/login')">login</button>
+        <button v-else @click="router.push('/personal')">头像</button>
       </nav>
     </header>
     <div class="tabs-content">