登出逻辑

  1. 弹窗询问用户是否确定登出
  2. 清除登录状态
    登录状态通常存储在 vuex 和 sessionStorage 中，更彻底的登出还可以把所有本地存储数据都清除掉，如 Cookie 和 localStorage 。
  3. 跳转到登录页面

代码实现

vue实战——登出【详解】_vue.js

<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");
    },