up

frontent/ops_vue_js/package-lock.json

@@ -57,6 +57,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1028,6 +1029,7 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1741,6 +1743,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -2793,6 +2796,7 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -2971,6 +2975,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
       "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.24",
         "@vue/compiler-sfc": "3.5.24",

frontent/ops_vue_js/src/components/HeardMain.vue

@@ -1,20 +1,22 @@
 <script setup>
 import { useUserStore } from "@/stores/user";
 
-import { RouterLink } from "vue-router";
+import { RouterLink, useRouter } from "vue-router";
 
 import { useI18n } from "vue-i18n";
 
 import { myfuncs } from "@/myfunc.js";
 import { onMounted, ref } from "vue";
 
-
+// import { Tooltip } from "@tabler/core";
+// import { Dropdown } from 'bootstrap'
 
 // 使用 vue-i18n 的 Composition API
 const { t, locale } = useI18n();
 const userStore = useUserStore();
 const theTeme = ref("light");
 const lang_sele = ref(null);
+const router = useRouter();
 
 function set_them(temp) {
   theTeme.value = temp;
@@ -30,6 +32,12 @@ function changeLanguage(lang) {
   //console.log("selectedLang:",selectedLang);
 }
 
+function logOut() {
+  //console.log("logout");
+  userStore.logout();
+  router.push("/login");
+}
+
 onMounted(() => {
   const savedTheme = myfuncs.getThemefromStorge();
   theTeme.value = savedTheme;
@@ -42,10 +50,8 @@ onMounted(() => {
     }
   }
 
-
   //userlogin
-  userStore.loginFromStoreCookie()
+  userStore.loginFromStoreCookie();
-
 });
 </script>
 
@@ -169,30 +175,32 @@ onMounted(() => {
           </router-link>
         </div>
 
-        <div v-if="userStore.isLoggedIn" class="nav-item dropdown">
+        <div v-else class="nav-item">
-          <a
+          <div class="dropdown">
-            href="#"
+            <div
-            class="nav-link d-flex lh-1 p-0 px-2"
+              
-            data-bs-toggle="dropdown"
+              class="nav-link d-flex lh-1 p-0 px-2"
-            aria-label="Open user menu"
+              data-bs-toggle="dropdown"
-          >
+              aria-label="Open user menu"
-            <span
-              class="avatar avatar-sm"
-              style="background-image: url(./static/avatars/000m.jpg)"
             >
-            </span>
+              <span
-            <div class="d-none d-xl-block ps-2">
+                class="avatar avatar-sm"
-              <div>Paweł Kuna</div>
+                style="background-image: url(./static/avatars/000m.jpg)"
-              <div class="mt-1 small text-secondary">UI Designer</div>
+              >
+              </span>
+              <div class="d-none d-xl-block ps-2">
+                <div>Paweł Kuna</div>
+                <div class="mt-1 small text-secondary">UI Designer</div>
+              </div>
+            </div>
+            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+              <a href="#" class="dropdown-item">Status</a>
+              <a href="./profile.html" class="dropdown-item">Profile</a>
+              <a href="#" class="dropdown-item">Feedback</a>
+              <div class="dropdown-divider"></div>
+              <a href="./settings.html" class="dropdown-item">Settings</a>
+              <div @click="logOut" class="dropdown-item">Logout</div>
             </div>
-          </a>
-          <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
-            <a href="#" class="dropdown-item">Status</a>
-            <a href="./profile.html" class="dropdown-item">Profile</a>
-            <a href="#" class="dropdown-item">Feedback</a>
-            <div class="dropdown-divider"></div>
-            <a href="./settings.html" class="dropdown-item">Settings</a>
-            <a href="./sign-in.html" class="dropdown-item">Logout</a>
           </div>
         </div>
       </div>

frontent/ops_vue_js/src/components/MyOffcanvas.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref } from "vue";
-import { Offcanvas } from "bootstrap";
+import { Offcanvas } from "@tabler/core";
 
 const offcanvasTop = ref(null);
 let ov;

frontent/ops_vue_js/src/my_network_func.js

@@ -26,10 +26,14 @@ export const my_network_func = {
     //把cookie插入json
     var data = {};
     data["data"] = json;
+
+    var userstore=useUserStore()
+
+    //console.log(userstore.cookieValue)
    
-    // if (useUserStore.cookieValue!="") {
+    if (userstore.userCookie) {
-    //   data["cookie"] = useUserStore.cookieValue;
+      data["userCookie"] = userstore.userCookie
-    // }
+    }
 
     var re_data = {};
 

frontent/ops_vue_js/src/stores/user.js

@@ -1,35 +1,62 @@
 // stores/user.js
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
-import { myfuncs } from '@/myfunc.js'
+import { myfuncs } from "@/myfunc.js";
 
 // 组合式 API 写法 (推荐)
 export const useUserStore = defineStore("user", () => {
   // 状态 (State)
   const userInfo = ref(null);
-  const cookieValue = ref("");
+  const userCookie = ref(null);
   const isLoggedIn = ref(false);
 
-  const logout = () => {
+  const cookiesQualified = () => {
-    isLoggedIn.value = false;
+    //返回一个合格的cookie 就是没过期的cookie
+    //如果cookie没过期直接返回，如果过期 顺便logout
+    var cookieTimeout = userCookie.value.ExpiresAt;
+    if (new Date(cookieTimeout) < new Date()) {
+      //过期了
+      logout();
+    }
+    return userCookie.value;
   };
+  const logout = () => {
+    userCookie.value = null;
+    isLoggedIn.value = false;
+    myfuncs.dele("userCookie");
+    myfuncs.deleT("userCookie");
+  };
+  const login = (cookie) => {
+    userCookie.value = cookie;
+    isLoggedIn.value = true;
+    //这里应该判读cookie的实效性
+    userCookie.value = cookiesQualified();
+  };
+
   const loginFromStoreCookie = () => {
     //从store获取cookie
-    var cookie=myfuncs.loadJson("userCookie")
+
-    console.log(cookie)
+    var cookie = myfuncs.loadJsonT("userCookie");
-    //isLoggedIn.value = true;
+    if (cookie) {
-  };
+      login(cookie);
-  const loginUpdata = (cookie) => {
+    } else {
-    console.log(cookie)
+      cookie = myfuncs.loadJson("userCookie");
-    cookieValue.value=cookie.value
+      if (cookie) {
+        login(cookie);
+      } else {
+        logout();
+      }
+    }
   };
 
+
   return {
     userInfo,
-    cookieValue,
+    userCookie,
     isLoggedIn,
     logout,
+    login,
     loginFromStoreCookie,
-    loginUpdata,
+    
   };
 });

frontent/ops_vue_js/src/views/HomeView.vue

@@ -20,6 +20,6 @@ const user = useUserStore()
   <main>
     1112
     <button @click="t">222</button>
-    {{ user.isLoggedIn }}
+    {{ user.userCookie }}
   </main>
 </template>

frontent/ops_vue_js/src/views/loginView.vue

@@ -91,7 +91,7 @@ function login() {
               }
 
               //更新用户信息
-              userStore.loginUpdata(r.data.return.cookie)
+              userStore.login(r.data.return.cookie)
               
 
               mos.value?.showAlert(