VSCode创建VUE项目（四）增加用户Session管理

将用户信息存储或者更新到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) {
             // 将用户信息和登录时间存储到 sessionStorage
            sessionStorage.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>