登出逻辑
- 弹窗询问用户是否确定登出
- 清除登录状态
登录状态通常存储在 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,详见
this.$store.replaceState(store_State_init);
// 跳转到登录页面
this.goto_login();
})
.catch(() => {});
},goto_login() {
this.$router.push("/login");
},