update: 修复缓存登录态存储问题

src/stores/userStore.ts

@@ -1,18 +1,20 @@
 import { defineStore } from "pinia";
-import { ref, onMounted } from "vue";
+import { ref,reactive, onMounted } from "vue";
 
 export const useUserStore = defineStore("user", () => {
-  const token = ref("");
+  const token = ref(localStorage.getItem("token")||"");
   const isLoggedIn = ref(false);
+  const mobilePhone = ref(localStorage.getItem("mobilePhone")||"");
 
-  const setToken = (newToken: string) => {
-    token.value = newToken;
+  const setToken = (data:any) => {
+    token.value = data;
     isLoggedIn.value = true;
     const expiryTime = Date.now() + 31536000 * 1000; // 当前时间 + 1 年
-    localStorage.setItem("token", newToken);
+    localStorage.setItem("token", data);
     localStorage.setItem("tokenExpiry", expiryTime.toString()); // 保存过期时间
   };
   const setMobilePhone = (phone: string) => {
+    mobilePhone.value = phone;
     localStorage.setItem("mobilePhone", phone);
   };
   const removeMobilePhone=()=>{
@@ -25,6 +27,7 @@ export const useUserStore = defineStore("user", () => {
     try {
       token.value = "";
       isLoggedIn.value = false;
+      localStorage.removeItem("userInfo");
       localStorage.removeItem("token");
       localStorage.removeItem("tokenExpiry"); // 删除过期时间
     } catch (error) {
@@ -65,6 +68,7 @@ export const useUserStore = defineStore("user", () => {
   return {
     token,
     isLoggedIn,
+    mobilePhone,
     setToken,
     clearToken,
     setMobilePhone,

src/views/HeadMenu.vue

@@ -100,26 +100,18 @@ const userStore = useUserStore();
 
 // 从 userStore 中获取登录状态
 const isLoggedIn = ref(userStore.isLoggedIn);
-const mobile = ref("");
 const approval_status = ref(-1);
+const token = ref(userStore.token);
+const mobile = ref(userStore.mobilePhone); 
+
+watch(userStore, (newVal)=>{
+  token.value = newVal.token
+  mobile.value = newVal.mobilePhone.replace(/(^\d{3})(\d+)(\d{4})/g, "$1****$2")
+  isLoggedIn.value = !!token.value;
+})
 
 // 每次页面加载时检查 token
 onMounted(() => {
-  const storedToken = localStorage.getItem("token");
-  const mobilePhone = localStorage.getItem("mobilePhone");
-
-  console.log(mobilePhone);
-
-  if (mobilePhone) {
-    mobile.value = mobilePhone.replace(/(^\d{3})(\d+)(\d{4})/g, "$1****$2");
-  }
-
-  if (storedToken) {
-    userStore.setToken(storedToken); // 如果有 token，设置 token 并更新登录状态
-  }
-
-  isLoggedIn.value = userStore.isLoggedIn; // 更新登录状态
-
   getApproval_status().then((res) => {
     if (res.code === 0 && res.status === 200) {
       approval_status.value = res.data.approval_status;

src/views/index/slider.vue

@@ -81,7 +81,7 @@
 </template>
 <script lang="ts" setup>
 import { useTransition } from "@vueuse/core";
-import { ref, onMounted, defineEmits } from "vue";
+import { ref, onMounted, defineEmits, watch } from "vue";
 import { Promotion, Download } from "@element-plus/icons-vue";
 import { ElMessage } from 'element-plus'
 import { getApproval_status } from "@/api/login";
@@ -92,7 +92,7 @@ import { useUserStore } from "@/stores/userStore";
 const router = useRouter();
 const userStore = useUserStore();
 
-const isLoggedIn = ref(userStore.isLoggedIn);
+const isLoggedIn = ref(!!userStore.token);
 const approval_status = ref(-1);
 const businessman = ref(0);
 const product = ref(0);

src/views/start/check.vue

@@ -326,19 +326,19 @@ const applyFormData = reactive({
   bank_image: "",
   email: "",
 });
-const isLoggedIn = ref(userStore.isLoggedIn);
-const license_type = ref('1')
+const isLoggedIn = ref(!!userStore.token);
+const license_type = ref(1)
 const optionsPermitType = [
   {
-    value: "1",
+    value: 1,
     label: "无需特殊资质",
   },
   {
-    value: "2",
+    value: 2,
     label: "需许可证资质",
   },
   {
-    value: "3",
+    value: 3,
     label: "需特许证件资质",
   },
 ];

src/views/start/start.vue

@@ -778,7 +778,7 @@ const processData = () => {
   });
 };
 
-const isLoggedIn = ref(userStore.isLoggedIn);
+const isLoggedIn = ref(!!userStore.token);
 const active = ref(1);
 const loading = ref(false);
 const formRef = ref(null);