- 弹窗询问用户是否确定登出
- 清除登录状态
登录状态通常存储在 vuex 和 sessionStorage 中，更彻底的登出还可以把所有本地存储数据都清除掉，如 Cookie 和 localStorage 。 - 跳转到登录页面
代码实现
<div class="loginBox" v-if="isLogin"> <el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> <span >{{ timeMark }}，{{ userInfo.nickname || userInfo.account }} </span > <img class="avatar" :src="'http://localhost:3000' + userInfo.avatar" alt="用户头像" /> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="userCenter">个人中心</el-dropdown-item> <el-dropdown-item divided command="logout">登出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div>
handleCommand(command) { if (command === "userCenter") { this.$router.push("/userCenter"); } if (command === "logout") { this.logout(); } },
logout() { this.$confirm("确定登出吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { // 清空 sessionStorage sessionStorage.clear(); // 重置 vuex,详见 https://blog.csdn.net/weixin_41192489/article/details/134332096 this.$store.replaceState(store_State_init); // 跳转到登录页面 this.goto_login(); }) .catch(() => {}); },
goto_login() { this.$router.push("/login"); },
