feat: 添加 Github 登录身份鉴权

nuxt.config.ts

@@ -20,7 +20,11 @@ export default defineNuxtConfig({
   // 引入模块
   modules: ['@nuxt/image', 'nuxt-icons', '@nuxtjs/supabase', '@nuxtjs/tailwindcss', '@element-plus/nuxt', '@nuxtjs/color-mode', 'nuxt-icon'],
   supabase: {
-    redirect: false // https://supabase.nuxtjs.org/get-started#redirect
+    redirectOptions: {
+      login: '/login',
+      callback: '/confirm',
+      exclude: ['/']
+    }
   },
   colorMode: {
     classSuffix: ''

src/components/Header/index.vue

@@ -2,30 +2,18 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-04-10 16:25:21
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2024-05-31 09:12:23
+ * @LastEditTime: 2024-06-07 08:53:30
  * @Description: 顶部布局
 -->
 <template>
   <el-header
     class="flex gap-4 justify-between items-center sticky top-0 h-14 shadow-md dark:shadow-white-500/50 backdrop-blur transition-all w-full dark:shadow-[0_4px_6px_-1px_rgb(255,255,255,0.1)]"
   >
     <!-- logo -->
-    <a
-      href="/"
-      class="flex gap-4 items-center"
-    >
+    <a href="/" class="flex gap-4 items-center">
       <!-- logo -->
-      <NuxtImg
-        src="/logo.svg"
-        alt="logo"
-        class="w-8 h-8"
-      />
-      <ColorModeSvg
-        light-fill="#000"
-        dark-fill="#fff"
-        name="dream-site"
-        class-name="h-6"
-      />
+      <NuxtImg src="/logo.svg" alt="logo" class="w-8 h-8" />
+      <ColorModeSvg light-fill="#000" dark-fill="#fff" name="dream-site" class-name="h-6" />
     </a>
     <!-- 右侧 社交图标 -->
     <div class="flex">
@@ -37,6 +25,10 @@
         tip="Github"
         icon="i-simple-icons-github"
       />
+      <!-- 登录用户头像 -->
+      <user-avatar />
+      <!-- 注销用户按钮 -->
+      <Logout />
     </div>
   </el-header>
 </template>

src/components/LoginCard/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="sm:mx-auto sm:w-full sm:max-w-md">
+    <div class="u-bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+      <div>
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-gray-300" />
+          </div>
+          <el-divider>登录账户</el-divider>
+        </div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

src/components/Logout/index.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: 白雾茫茫丶<baiwumm.com>
+ * @Date: 2024-06-06 18:00:33
+ * @LastEditors: 白雾茫茫丶<baiwumm.com>
+ * @LastEditTime: 2024-06-07 08:59:59
+ * @Description: 注销用户
+-->
+<template>
+  <client-only>
+    <el-tooltip content="注销用户">
+      <el-button v-if="user" circle text @click="logout">
+        <Icon name="ri:logout-box-r-line" class="h-5 w-5" />
+      </el-button>
+    </el-tooltip>
+  </client-only>
+</template>
+<script setup lang="ts">
+import { ElMessageBox } from 'element-plus'
+
+const client = useSupabaseClient()
+const user = useSupabaseUser()
+
+// 注销用户
+const logout = async () => {
+  ElMessageBox.alert('确认注销当前用户吗？', '温馨提示', {
+    confirmButtonText: '确定',
+    beforeClose: async (action, instance, done) => {
+      if (action === 'confirm') {
+        instance.confirmButtonLoading = true
+        await client.auth.signOut().then(() => {
+          done()
+          instance.confirmButtonLoading = false
+          navigateTo('/')
+        })
+      }
+      if (action === 'cancel') {
+        done()
+      }
+    }
+  })
+}
+</script>

src/components/UserAvatar/index.vue

@@ -0,0 +1,17 @@
+<!--
+ * @Author: 白雾茫茫丶<baiwumm.com>
+ * @Date: 2024-06-06 17:53:32
+ * @LastEditors: 白雾茫茫丶<baiwumm.com>
+ * @LastEditTime: 2024-06-07 09:10:05
+ * @Description: 当前登录用户头像
+-->
+<template>
+  <client-only>
+    <el-button v-if="user" circle text>
+      <el-avatar :src="user.user_metadata.avatar_url" :size="20" />
+    </el-button>
+  </client-only>
+</template>
+<script setup lang="ts">
+const user = useSupabaseUser()
+</script>

src/pages/confirm/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const user = useSupabaseUser()
+
+watch(
+  user,
+  () => {
+    if (user.value) {
+      return navigateTo('/')
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div>
+    <p class="u-text-black">Redirecting...</p>
+  </div>
+</template>

src/pages/login/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const user = useSupabaseUser()
+const { auth } = useSupabaseClient()
+
+const redirectTo = `${useRuntimeConfig().public.baseUrl}/confirm`
+
+watchEffect(() => {
+  if (user.value) {
+    navigateTo('/')
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <h2 class="my-6 text-center text-3xl font-extrabold u-text-white">登录您的账户</h2>
+    <el-card class="sm:mx-auto sm:w-full sm:max-w-md">
+      <el-divider>请选择</el-divider>
+      <el-button
+        type="primary"
+        size="large"
+        :dark="colorMode.value === 'dark'"
+        class="w-full"
+        @click="auth.signInWithOAuth({ provider: 'github', options: { redirectTo } })"
+      >
+        <Icon name="i-simple-icons-github" class="h-5 w-5 mr-2" />
+        Github
+      </el-button>
+    </el-card>
+  </div>
+</template>