退出登录功能流程

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

退出登录功能

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
清除成功跳转登录页面。

小伙伴需要有一定的项目基础才能看得懂
看登录功能点这里 链接: 登录功能

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