1. 首页首页
  2. 科技前沿科技前沿

2025年退出登录功能流程

科技前沿 • • 阅读 77

退出登录功能流程个人网站 紫陌 笔记分享网 想寻找共同学习交流 共同成长的伙伴 请点击 前端学习交流群 退出登录功能 1 静态组件完成 退出登录功能相对来说还是比较简单的 首先先把静态弄好 一般就是点击退出按钮弹出提示操作 我这里就用到 element 的 Message Box 组件了

大家好，我是讯享网，很高兴认识大家。

退出登录功能

1.静态组件完成

退出登录功能相对来说还是比较简单的，首先先把静态弄好，一般就是点击退出按钮弹出提示操作。我这里就用到element的Message Box组件了。

 <el-menu-item index="2" @click="logout"><i class="el-icon-switch-button"></i> 退出登录</el-menu-item> logout() { 
    this.$confirm('确定要退出登录吗?', '提示', { 
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { 
    this.$message({ 
    type: 'success', message: '删除成功!' }); }).catch(() => { 
    this.$message({ 
    type: 'info', message: '已取消删除' }); }); } } }

讯享网

2. 清理数据

退出登录最终要的就是清除token


讯享网

讯享网//引入清除token函数 import { 
    removeToken} from "@/utils/Token" logout() { 
    this.$confirm('确定要退出登录吗?', '提示', { 
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { 
    this.$message({ 
    type: 'success', message: '退出成功!', }); //清空token this.$store.commit("updateToken","") removeToken("TOKEN") //跳转登录页面 this.$router.replace("/login") }).catch(() => { 
    this.$message({ 
    type: 'info', message: '已取消退出登录' }); }); }

在说登录功能的时候 已经写好清除token函数了,
要清除本地存储的token，还有vuex里面存储的token
清除成功跳转登录页面。

想看注册的点这里 链接: 注册功能实现

小讯
上一篇 2025-02-09 21:54
下一篇 2025-03-25 12:15

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/43665.html