退出登录功能流程
> 在说登录功能的时候 已经写好清除token函数了,> 要清除本地存储的token,还有vuex里面存储的token> 清除成功跳转登录页面。# 退出登录功能##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
清除成功跳转登录页面。
小伙伴需要有一定的项目基础才能看得懂
看登录功能点这里 链接: 登录功能
想看注册的点这里 链接: 注册功能实现
更多推荐
已为社区贡献3条内容
所有评论(0)