Vue3+Element-Plus 登录成功后主页退出功能实现 十八

1. 退出功能的实现

 1.1 退出功能实现的原理

 ㈠ 如果是基于token的方式记录用户的登录信息，那么实现退出功能，只需要销毁保存在本地的token 即可。这样用户后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面

㈡ 实现核心代码

//清空token
window.sessionStoragge.clear()

//使用编程式导航跳转到登录页面
this.$router.push('/login')

㈢ Home.vue页面实现

<template>
<div>
  <el-button type="info" @click="logout">退出</el-button>
</div>
</template>
<script>
export default {
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>

</style>

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1