Vue Nuxt 3 登出

本篇介紹Vue Nuxt 3的登出(Logout)實作。

專案目前已經有了登入驗證、使用者狀態與使用者角色與側邊選單的權限控制，接下來實作登出功能，也就是讓使用者可以離開登入狀態。

事前要求

參考「Vue Nuxt 3 登入驗證」，了解登入驗證方式。

參考「Vue Nuxt 3 登入狀態管理」，了解前端登入狀態同步。

參考「Vue Nuxt 3 側邊選單權限控管」，加入了使用者狀態與角色權限。

建立登出API

在server/api/auth目錄下新增logout.post.ts為[登出API] [POST] /api/auth/logout，作用為清除紀錄token的Cookie。

server/api/auth/logout.post.ts

export default defineEventHandler((event) => {
  // 清除 token cookie
  setCookie(event, 'token', '', {
    httpOnly: true,
    maxAge: 0,
  })

  return { success: true }
})

加入登出按鈕

在上方導覽列(components/Header.vue)的使用者名稱右側加上[登入]按鈕，使用者點選後即會呼叫[登出API]清除token的Cookie，接著清除[登入狀態]和[使用者狀態]，如此前端和server就沒有了原本登入使用者的資訊，最後導向[登入頁面]。

components/Header.vue

<template>
  <header class="header">
    <nav class="nav-left">
      <ul>
        <li>
          <NuxtLink to="/">Home</NuxtLink>
        </li>
        <li>
          <NuxtLink to="/about">About</NuxtLink>
        </li>
      </ul>
    </nav>
    <!-- 右上角使用者資訊 -->
    <div class="nav-right" v-if="user">
      {{ user.name }} ({{ user.role }})
      <button @click="logout">登出</button>
    </div>
  </header>
</template>

<script setup lang="ts">
const user = useUser()
const isLogin = useAuth()
const logout = async () => {
  await $fetch('/api/auth/logout', { method: 'POST' })
  isLogin.value = false
  user.value = null
  navigateTo('/login')
}
</script>

<!--...-->

github

測試

使用者登入後點選右上角名稱旁邊的[登出]按鈕即可登出。