將用戶信息存儲或者更新到Session

sessionStorage.setItem("userID",loginform.value.username);
sessionStorage.setItem('loginTime', Date.now());

獲取Session信息

const storedUserInfo = sessionStorage.getItem('userID');
const loginTime = sessionStorage.getItem('loginTime');

移除Session信息

sessionStorage.removeItem("userID");
sessionStorage.removeItem('loginTime');

以下是代碼修改：

效果：當進入登錄頁面的時候之前登錄過且沒有超時，直接跳轉到登錄后界面，登錄后的界面長時間沒有操作，直接跳轉登錄界面

LoginView.vue

<template><div class="login-container dis-h"><div class="login-form  dis-h"><div class="dis-v left"><span> 歡迎~ </span><span> VUE 新世界 </span></div><div class="dis-v right"><div class="username dis-h"><el-input placeholder="請輸入用戶名" v-model="loginform.username" /></div><div class="pwd dis-h"><el-input type="password" placeholder="請輸入密碼" v-model="loginform.pwd" /></div><div class="btn dis-h"><el-button size="large" style="width:220px;background-color:#626aef;color:#fff;font-weight:bold; "@click="commit">登錄</el-button></div></div></div></div>
</template>
<script setup>
import { ref, getCurrentInstance ,onMounted} from "vue"
import router from '@/router';
import { ElMessage } from 'element-plus';const { appContext } = getCurrentInstance()
const axios = appContext.config.globalProperties.$axios;
var loginform = ref({username: "",pwd: ""
})var commit = async () => {try {var response = await axios.get('/v1/aifunction/employee/info?emplCode=' + loginform.value.username);//保存日志信息console.log("--------------調用后臺出參{"+loginform.value.username+"}--------------------");console.log(response);if (response && response.data) {if (response.data.defaultDeptCode == loginform.value.pwd) {// 將用戶信息和登錄時間存儲到 sessionStoragesessionStorage.setItem("userID",loginform.value.username);sessionStorage.setItem('loginTime', Date.now());ElMessage.success("YES,成功啦啦啦啦啦！");router.replace("./about")}else {ElMessage.error("Sorry,請檢查用戶名和密碼！失敗！" + response.data.defaultDeptCode);}}else {ElMessage.error("Sorry,請檢查用戶名！沒有該用戶！");}} catch (error) {//登錄失敗,提示錯誤信息console.log(error)//this.$message.error('登錄失敗,請檢查用戶名和密碼')ElMessage.error("Sorry,失敗！" + error);}}onMounted(() => {const storedUserInfo = sessionStorage.getItem('userID');const loginTime = sessionStorage.getItem('loginTime');if (storedUserInfo && loginTime) {const currentTime = Date.now();const sessionTimeout = 2 * 60 * 1000; // 會話超時時間，這里設置為 2 分鐘const elapsedTime = currentTime - parseInt(loginTime);if (elapsedTime < sessionTimeout) {router.replace("./about")}}
});
</script>
<style>
.login-container {width: 100vw;height: 100vh;background-image: url('../assets/background.jpeg');align-items: center;justify-content: center;background-repeat: no-repeat;/* 背景圖片不重復 */background-size: cover;/* 背景圖片覆蓋整個div區域 */background-position: center;/* 背景圖片居中顯示 */
}.login-form {width: 600px;height: 300px;/* background-color: red; */}.login-form .left {width: 50%;height: 100%;align-items: left;justify-content: center;font-size: 1.6rem;font-weight: bold;background: linear-gradient(to right bottom, rgba(136, 209, 234, 0.80) 5%, rgba(215, 193, 187, 0.80) 100%);color: #fff;text-indent: 1rem;
}.login-form .right {width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.90);align-items: center;justify-content: center;
}.login-form .username,
.pwd,
.btn {padding: 0.5rem 0;}/*水平排列子元素*/
.dis-h {display: flex;
}/*垂直排列子元素*/
.dis-v {display: flex;flex-direction: column;
}
</style>

AboutView.vue

<template><div class="about"><h1>This is an about page</h1></div><div><el-button @click="loginOut">退出登錄</el-button></div>
</template><script setup>
import router from '@/router';
import { ref, onMounted } from 'vue';var loginOut=function(){sessionStorage.removeItem("userID");sessionStorage.removeItem('loginTime');router.replace("/")
}onMounted(() => {const storedUserInfo = sessionStorage.getItem('userID');const loginTime = sessionStorage.getItem('loginTime');if (storedUserInfo && loginTime) {const currentTime = Date.now();const sessionTimeout = 2 * 60 * 1000; // 會話超時時間，這里設置為 2 分鐘const elapsedTime = currentTime - parseInt(loginTime);if (elapsedTime >= sessionTimeout) {loginOut();}else{sessionStorage.setItem('loginTime', Date.now());}}
});</script>