跳到主要内容

退出用户登录功能

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

添加样式​

首先，我们需要在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>
🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情