退出用户登录功能

本节我们将学习如何实现退出用户登录的功能。我们需要在页面上添加一个点击按钮，并设置一个下拉列表和退出按钮。点击退出按钮即可实现退出登录功能。

添加样式

首先，我们需要在header里添加一个点击事件，用于展示下拉列表。添加一个下拉列表需要使用HTML代码，我们可以将代码粘贴到页面中。

代码如下：

frontend/src/components/Header.vue

<div v-if="$store.state.isLogin" @click="toggleMenu" id="userinfo" class="flex relative hover: cursor-pointer items-center justify-center rounded border border-solid text-white text-lg h-9 text-center">
      <div id="username" class="px-2">{{ username }}</div>
      <div class="pr-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </div>
      <div :class="{hidden: !showMenu}" id="userinfo_menu" class="absolute top-[40px] w-32 transition ease-in-out delay-150 z-50">
        <ul class="bg-primary-700 py-2 px-4 text-sm">
          <li class="plx-2 py-2">
            <a href="/personal">个人中心</a>
          </li>
          <li class="plx-2 py-2">
            <a href="/collect">我的收藏</a>
          </li>
          <li class="plx-2 py-2">
            <a href="/orders">我的订单</a>
          </li>
          <li class="plx-2 py-2">
            <router-link to="/" v-on:click.prevent="logout()">退出</router-link>
          </li>
        </ul>
      </div>
    </div>
<div v-else class="text-white flex-shrink-0 pr-2">
    <a href="/login/">登录</a> /
    <a href="/register/">注册</a>
</div>

页面效果如下图所示。

实现交互逻辑

我们设置了一个属性show menu，初始值为false，表示不展示下拉列表。当点击按钮时，我们执行toggle menu函数来切换下拉列表的展示状态。

接下来，我们需要定义toggle函数。在toggle函数中，我们将showmenu属性的值取反，以实现展开和隐藏的效果。

frontend/src/components/Header.vue

export default {
  components: { Category },
  name: "Header",
  data() {
    return { keyword: "", username: "", showMenu: false };
  },
  methods: {
      // 切换展示和隐藏
      toggleMenu() {
        this.showMenu = !this.showMenu
      },

另外，我们还添加了一个退出按钮，当点击退出按钮时，我们执行logout函数。在logout函数中，我们将之前登录时设置的属性全部置空，包括token、refresh token、username等。同时，我们将存储在store中的状态也设置为false，以表示用户已退出登录。代码如下：

frontend/src/components/Header.vue

  methods: {
    // 切换展示和隐藏
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    // 退出
    logout() {
      localStorage.clear(); // 情况本地数据
      this.$store.commit("setLoginStatus", false);
    },

最后，刷新页面并点击退出按钮，即可实现退出用户登录的功能。