添加token过期检查

src/App.vue

@@ -6,8 +6,8 @@ import chat from "./views/chat.vue";
 import login from "./views/login.vue";
 import account from "./views/accountInfo.vue";
 import getQueryString from '@/func/getQuery'
-import { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon,NModalProvider } from 'naive-ui'
-import { ref, watch, h ,shallowRef, onMounted, computed} from "vue";
+import { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon, NModalProvider } from 'naive-ui'
+import { ref, watch, h, shallowRef, onMounted, computed } from "vue";
 // import { useRoute } from "vue-router";
 import {
     CloudUploadOutline as uploadIcon,
@@ -16,18 +16,25 @@ import {
     ChatbubblesOutline as chatIcon,
     SettingsOutline as settingIcon,
     FootstepsOutline as AccountIcon
-    
+
 } from '@vicons/ionicons5'
 import { useSettingStore } from "@/pinia/store";
+import config from "../miaoShareConfig.json"
 
 // console.log(process.env.NODE_ENV)
 
 
 const settingData = useSettingStore();
+const serverPort = settingData.serverPort;
+const baseUrl =
+    location.protocol + "//" + location.hostname + ":" + serverPort + "/";
+const tokenExpiresIn = config.tokenExpiresIn
+
+
 const activePage = ref('upload')
 const isComponent = shallowRef(upload)
 watch(activePage, () => {
-    isComponent.value={upload,download,setting,chat,login,account}[activePage.value]
+    isComponent.value = { upload, download, setting, chat, login, account }[activePage.value]
 })
 function renderIcon(icon) {
     return () => h(NIcon, null, { default: () => h(icon) })
@@ -38,7 +45,7 @@ const menuOptions = ref([
         label: '上传',
         key: 'upload',
         icon: renderIcon(uploadIcon),
-        disabled:computed(()=>{
+        disabled: computed(() => {
             // console.log(settingData)
             return settingData.token === null
         })
@@ -47,7 +54,7 @@ const menuOptions = ref([
         label: '下载',
         key: 'download',
         icon: renderIcon(downloadIcon),
-        disabled:computed(()=>{
+        disabled: computed(() => {
             return settingData.token === null
         })
     },
@@ -55,7 +62,7 @@ const menuOptions = ref([
         label: 'Chat',
         key: 'chat',
         icon: renderIcon(chatIcon),
-        disabled:computed(()=>{
+        disabled: computed(() => {
             return settingData.token === null
         })
     },
@@ -63,15 +70,15 @@ const menuOptions = ref([
         label: '设置',
         key: 'setting',
         icon: renderIcon(settingIcon),
-        disabled:computed(()=>{
+        disabled: computed(() => {
             return settingData.token === null
         })
     },
     {
-        label:'账户',
-        key:'account',
+        label: '账户',
+        key: 'account',
         icon: renderIcon(AccountIcon),
-        disabled:computed(()=>{
+        disabled: computed(() => {
             return settingData.token === null
         })
     }
@@ -86,22 +93,48 @@ const menuOptions = ref([
 // }
 
 
-onMounted(()=>{
+
+
+onMounted(async () => {
     let aP = getQueryString('aP')
     // console.log(aP)
-    if(aP){
+    if (aP) {
         activePage.value = aP
     }
-    if(settingData.token === null){
+    if (settingData.getToken() === null) {
         aP = activePage.value
         activePage.value = 'login'
         // 登录后跳原来的activePage
-        const w = watch(()=>settingData.token,()=>{
+        const w = watch(() => settingData.token, () => {
             activePage.value = aP
             w()
         })
-    }else{
+    } else {
         // 刷新token
+        (async function refreshToken() {
+            const old_token = settingData.getToken()
+            console.log(old_token)
+            const response = await fetch(`${baseUrl}user/refrashToken`, {
+                // credentials: 'include',
+                method: "POST",
+                headers: {
+                    'Authorization': `Bearer ${settingData.token}`,
+                    "Content-Type": "application/json"
+                },
+                // body: JSON.stringify({
+                //     token:settingData.token
+                // })
+            });
+            console.log(response)
+            let data = await response.json()
+            if (data.status === 'Error') {
+                console.log('falied')
+            } else {
+                // console.log(data)
+                localStorage.setItem('token', data.new_token)
+                localStorage.setItem('tokenExpiredTime', parseInt(Date.now()) + parseInt(tokenExpiresIn) * 3600000)
+            }
+        })()
     }
 })
 </script>
@@ -111,16 +144,17 @@ onMounted(()=>{
         <n-notification-provider placement="bottom-right" :max="3">
             <n-message-provider>
                 <n-modal-provider>
-                        <n-card content-style="padding: 0; margin:0" id="theCard">
-                            <div id="menu">
-                                <n-menu mode="horizontal" :responsive="true" v-model:value="activePage" :options="menuOptions" :icon-size="26"></n-menu>
-                            </div>
+                    <n-card content-style="padding: 0; margin:0" id="theCard">
+                        <div id="menu">
+                            <n-menu mode="horizontal" :responsive="true" v-model:value="activePage"
+                                :options="menuOptions" :icon-size="26"></n-menu>
+                        </div>
 
-                            <div style="padding: 20px;">
-                                <KeepAlive>
-                                    <component :is="isComponent"></component>
-                                </KeepAlive>
-                            </div>
+                        <div style="padding: 20px;">
+                            <KeepAlive>
+                                <component :is="isComponent"></component>
+                            </KeepAlive>
+                        </div>
                     </n-card>
                 </n-modal-provider>
             </n-message-provider>
@@ -144,14 +178,15 @@ onMounted(()=>{
     height: 90vh;
 }
 
-#menu{
-    width:  100%;
+#menu {
+    width: 100%;
     height: auto;
     /* background-color: blue; */
     padding-top: 5px;
-    border-bottom: 1px solid  rgb(60, 60, 60, 0.1);
+    border-bottom: 1px solid rgb(60, 60, 60, 0.1);
     user-select: none
 }
+
 @media screen and (max-width:768px) {
     #theCard {
         width: 100vw;

src/pinia/store.js

@@ -5,7 +5,7 @@ const userID = localStorage.getItem('userID');
 const userGroup = localStorage.getItem('userGroup');
 
 const tokenExpiresIn = config.tokenExpiresIn
-if(!localStorage.getItem('tokenExpiredTime') || 
+if(localStorage.getItem('tokenExpiredTime') == null || 
    		parseInt(localStorage.getItem('tokenExpiredTime')) < parseInt(Date.now())){
 	localStorage.removeItem('token')
    }
@@ -47,8 +47,10 @@ export const useSettingStore = defineStore("setting", {
 	actions: {
 		setJWT( token,keepTokenLocal ){
 			this.token = token
-			if(keepTokenLocal)
+			if(keepTokenLocal){
 				localStorage.setItem('token',token)
+				localStorage.setItem('tokenExpiredTime',parseInt(Date.now())+parseInt(tokenExpiresIn)*3600000)
+			}
 		},
 		setUserID( id,keepTokenLocal ){
 			this.userID = id
@@ -59,6 +61,9 @@ export const useSettingStore = defineStore("setting", {
 			this.userGroup = g
 			if(keepTokenLocal)
 				localStorage.setItem('userGroup',g)
+		},
+		getToken(){
+			return localStorage.getItem('token')
 		}
 		// increment() {
 		// 	this.count++;