vue3 + ts + vite + element-plus记录session

先看效果图：

 

1、模拟用户数据，json格式

 2、在路由中加入以下代码，路由拦截

router.beforeEach((to, from, next) => {

  // 1、访问登录页面或者注册页面不需要权限

  if (to.path === '/login' || to.path === '/register') {

    return next()

  }

  // 2、先要获取token

  const tokenstr = window.sessionStorage.getItem('token')

  // 3、token为空，强制跳转到登录页面

  if (!tokenstr) {

    ElMessage({

      message: "请登录用户信息！",

      type: "error",

    })

    return next('/login')

  }

  next()

})

 3、登录页信息。用户输入信息和模拟信息（或者数据库信息做对比），有则放行

<template>

  <div class="main">

    <h1 class="title">Login</h1>

    <div class="login-body">

      <div>

        <span>用户名：</span>

        <input type="text" maxlength="11" minlength="6" v-model="userName" />

        <span>密码：</span>

        <input v-model="userPwd" type="password" maxlength="11" minlength="6" />

      </div>

      <el-button @click="goto">登录</el-button>

    </div>

  </div>

</template>

<script lang="ts" setup>

import { ref } from "@vue/reactivity"

import { ElMessage } from "element-plus"

import { useRouter } from "vue-router"

const router = useRouter()

import usersdata from "../assets/js/user.json"

const user = ref(usersdata)

const userName = ref("")

const userPwd = ref("")

function goto() {

  /*  let userData = user.value.some(

    (i) => i.username == userName.value && i.userpwd == userPwd.value

  )

  if (userData == true) {

    sessionStorage.setItem("token", `${userData}`)

    router.push("/index")

  } else {

    ElMessage({

      message: "请输入正确的用户信息！",

      type: "warning",

    })

    router.push("/login")

  } */

  let userData = ref(

    user.value.find(

      (i) => i.username == userName.value && i.userpwd == userPwd.value

    )

  )

  if (userData.value != undefined || userData.value != null) {

    sessionStorage.setItem("token", userData.value.username)

    router.push("/index")

  } else {

    ElMessage({

      message: "请输入正确的用户信息！",

      type: "warning",

    })

    router.push("/login")

  }

}

</script>

<style scoped lang="scss">

.main {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  .title {

    color: green;

  }

  .login-body {

    display: flex;

    flex-direction: column;

    width: 30%;

    background-color: rgb(122, 242, 230);

    border-radius: 16px;

    align-items: center;

    justify-content: center;

    padding: 15px 0 60px 0;

    div {

      display: flex;

      flex-direction: column;

      input {

        margin-bottom: 15px;

      }

    }

    button {

      margin-top: 5px;

    }

  }

}

</style>

4、最后就是退出功能，点击退出按钮，清除token，（关闭网页也是自动清除token的，详情请看  window.sessionStorage）

const sessionusername = ref(sessionStorage.getItem("token"))

function exit() {

  window.sessionStorage.removeItem("token")

  router.push("/login")

}