将用户信息存储或者更新到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>