From 1130e6a574b234dff46897e0743057f3e6e711fc Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Mon, 12 Aug 2024 23:51:42 +0800
Subject: [PATCH] :passport_control: Auth guard

---
 app.vue                                   |  4 +---
 components/UserMenu.vue                   | 12 +++++-------
 components/account/AuthTicketTable.vue    |  6 +++---
 components/auth/AuthenticateCompleted.vue |  2 --
 middleware/auth.ts                        |  7 +++++++
 package.json                              |  1 -
 pages/auth/authorize.vue                  | 17 +++++++----------
 pages/users/me.vue                        |  4 ++++
 stores/userinfo.ts                        | 18 ++++++------------
 9 files changed, 33 insertions(+), 38 deletions(-)
 create mode 100644 middleware/auth.ts

diff --git a/app.vue b/app.vue
index 5b38005..45d7509 100644
--- a/app.vue
+++ b/app.vue
@@ -20,8 +20,6 @@ onMounted(() => {
     theme.global.name.value = event.matches ? "dark" : "light"
   })
 
-  if (checkLoggedIn()) {
-    auth.readProfiles()
-  }
+  auth.readProfiles()
 })
 </script>
diff --git a/components/UserMenu.vue b/components/UserMenu.vue
index bb52304..6fcff17 100755
--- a/components/UserMenu.vue
+++ b/components/UserMenu.vue
@@ -16,7 +16,7 @@
       <v-divider class="border-opacity-50 my-2" />
 
       <v-list-item title="Dashboard" prepend-icon="mdi-account-supervisor" exact to="/users/me" />
-      <v-list-item title="Sign out" prepend-icon="mdi-logout" @click="signout"></v-list-item>
+      <v-list-item title="Sign out" prepend-icon="mdi-logout" @click="signOut"></v-list-item>
     </v-list>
   </v-menu>
 </template>
@@ -24,7 +24,6 @@
 <script setup lang="ts">
 import { defaultUserinfo, useUserinfo } from "@/stores/userinfo"
 import { computed } from "vue"
-import Cookie from "universal-cookie"
 
 const config = useRuntimeConfig()
 
@@ -48,11 +47,10 @@ const avatar = computed(() => {
   return id.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${id.userinfo.data?.avatar}` : void 0
 })
 
-function signout() {
-  const ck = new Cookie()
-  ck.remove("__hydrogen_atk")
-  ck.remove("__hydrogen_rtk")
+function signOut() {
+  useCookie("__hydrogen_atk", { watch: "shallow" }).value = null
+  useCookie("__hydrogen_rtk", { watch: "shallow" }).value = null
   id.userinfo = defaultUserinfo
-  window.location.reload()
+  reloadNuxtApp()
 }
 </script>
diff --git a/components/account/AuthTicketTable.vue b/components/account/AuthTicketTable.vue
index 9b4621b..3dcbcb2 100644
--- a/components/account/AuthTicketTable.vue
+++ b/components/account/AuthTicketTable.vue
@@ -130,7 +130,7 @@ async function readTickets({ page, itemsPerPage }: { page?: number; itemsPerPage
       offset: ((pagination.tickets.page - 1) * pagination.tickets.pageSize).toString(),
     }),
     {
-      headers: { Authorization: `Bearer ${getAtk()}` },
+      headers: { Authorization: `Bearer ${useAtk().value}` },
       credentials: "include",
     },
   )
@@ -156,7 +156,7 @@ async function readEvents({ page, itemsPerPage }: { page?: number; itemsPerPage?
       offset: ((pagination.events.page - 1) * pagination.events.pageSize).toString(),
     }),
     {
-      headers: { Authorization: `Bearer ${getAtk()}` },
+      headers: { Authorization: `Bearer ${useAtk().value}` },
       credentials: "include",
     },
   )
@@ -176,7 +176,7 @@ async function killTicket(item: any) {
   reverting.sessions = true
   const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/users/me/tickets/${item.id}`, {
     method: "DELETE",
-    headers: { Authorization: `Bearer ${getAtk()}` },
+    headers: { Authorization: `Bearer ${useAtk().value}` },
     credentials: "include",
   })
   if (res.status !== 200) {
diff --git a/components/auth/AuthenticateCompleted.vue b/components/auth/AuthenticateCompleted.vue
index 16931ec..ef0ddef 100644
--- a/components/auth/AuthenticateCompleted.vue
+++ b/components/auth/AuthenticateCompleted.vue
@@ -51,8 +51,6 @@ async function getToken(tk: string) {
     error.value = err
     throw new Error(err)
   } else {
-    const out = await res.json()
-    setTokenSet(out["access_token"], out["refresh_token"])
     error.value = null
   }
 }
diff --git a/middleware/auth.ts b/middleware/auth.ts
new file mode 100644
index 0000000..ebb83aa
--- /dev/null
+++ b/middleware/auth.ts
@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const state = useLoggedInState();
+
+  if (!state.value) {
+    return navigateTo(`/auth/sign-in?redirect_uri=${to.fullPath}`)
+  }
+})
diff --git a/package.json b/package.json
index 060619e..68ece5f 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "@pinia/nuxt": "^0.5.3",
     "nuxt": "^3.12.4",
     "pinia": "^2.2.1",
-    "universal-cookie": "^7.2.0",
     "vue": "latest"
   },
   "devDependencies": {
diff --git a/pages/auth/authorize.vue b/pages/auth/authorize.vue
index 7ac8bc8..1d504fa 100755
--- a/pages/auth/authorize.vue
+++ b/pages/auth/authorize.vue
@@ -68,28 +68,26 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
-import { useRoute } from "vue-router"
+import { ref } from "vue"
+
+definePageMeta({
+  middleware: ["auth"],
+})
 
 const config = useRuntimeConfig()
 
 const route = useRoute()
 
 const error = ref<string | null>(null)
-
 const loading = ref(false)
 
 const metadata = ref<any>(null)
-const requestedClaims = computed(() => {
-  const scope: string = (route.query["scope"] as string) ?? ""
-  return scope.split(" ")
-})
 
 const panel = ref("confirm")
 
 async function tryAuthorize() {
   const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/o/authorize` + window.location.search, {
-    headers: { Authorization: `Bearer ${getAtk()}` },
+    headers: { Authorization: `Bearer ${useAtk().value}` },
     credentials: "include",
   })
 
@@ -102,7 +100,6 @@ async function tryAuthorize() {
       panel.value = "callback"
       callback(data["ticket"])
     } else {
-      document.title = `Solarpass | Connect to ${data["client"]?.name}`
       metadata.value = data["client"]
       loading.value = false
     }
@@ -123,7 +120,7 @@ async function approve() {
   loading.value = true
   const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/o/authorize` + window.location.search, {
     method: "POST",
-    headers: { Authorization: `Bearer ${getAtk()}` },
+    headers: { Authorization: `Bearer ${useAtk().value}` },
     credentials: "include",
   })
 
diff --git a/pages/users/me.vue b/pages/users/me.vue
index bcf3277..3fe3e4d 100644
--- a/pages/users/me.vue
+++ b/pages/users/me.vue
@@ -43,6 +43,10 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  middleware: ["auth"],
+})
+
 const config = useRuntimeConfig()
 
 const auth = useUserinfo()
diff --git a/stores/userinfo.ts b/stores/userinfo.ts
index bfc2608..f9baa2a 100644
--- a/stores/userinfo.ts
+++ b/stores/userinfo.ts
@@ -1,4 +1,3 @@
-import Cookie from "universal-cookie"
 import { defineStore } from "pinia"
 import { ref } from "vue"
 
@@ -14,17 +13,12 @@ export const defaultUserinfo: Userinfo = {
   data: null,
 }
 
-export function getAtk(): string {
-  return new Cookie().get("__hydrogen_atk")
+export function useAtk() {
+  return useCookie("__hydrogen_atk", { watch: "shallow" })
 }
 
-export function checkLoggedIn(): boolean {
-  return new Cookie().get("__hydrogen_rtk")
-}
-
-export function setTokenSet(atk: string, rtk: string) {
-  new Cookie().set("__hydrogen_atk", atk, { path: "/" })
-  new Cookie().set("__hydrogen_rtk", rtk, { path: "/" })
+export function useLoggedInState() {
+  return computed(() => useAtk().value != null)
 }
 
 export const useUserinfo = defineStore("userinfo", () => {
@@ -32,14 +26,14 @@ export const useUserinfo = defineStore("userinfo", () => {
   const isReady = ref(false)
 
   async function readProfiles() {
-    if (!checkLoggedIn()) {
+    if (!useLoggedInState().value) {
       isReady.value = true
     }
 
     const config = useRuntimeConfig()
 
     const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/users/me`, {
-      headers: { Authorization: `Bearer ${getAtk()}` },
+      headers: { Authorization: `Bearer ${useAtk().value}` },
       credentials: "include",
     })