Add login util

Fetch token at LoginActivate
nbtca · Nov 12, 2023 · 957f786 · 957f786
1 parent 61965e3
commit 957f786
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 60 deletions.
diff --git a/src/views/CallbackView.vue b/src/views/CallbackView.vue
@@ -9,43 +9,28 @@ import LogoutButton from "@/components/LogoutButton.vue"
 import { isFormValid } from "@/utils/isFormValid"
 import md5 from "blueimp-md5"
 import { createTokenViaLogtoToken } from "@/services/logto"
+import { handleCreateToken } from "./Login/login"
 
 const store = useAccountStore()
 
-const { signIn, signOut, isAuthenticated, fetchUserInfo, getAccessToken } = useLogto()
+const { isAuthenticated, getAccessToken } = useLogto()
 const authenticateFailed = ref(false)
 const needBindMember = ref(false)
 
-const handleCreateToken = async () => {
+const { isLoading, error } = useHandleSignInCallback(async () => {
   const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
-  if (token == undefined) {
-    throw new Error("token is undefined")
-  }
-
-  const res = await createTokenViaLogtoToken(token)
-  const body: unknown = await res.json()
-  if (res.status == 422 && body instanceof Object && "message" in body && body.message.includes("not found")) {
-    needBindMember.value = true
+  if (!token) {
     return
   }
-  if (body instanceof Object && "token" in body && "memberId" in body && "role" in body) {
-    store.account = body as Member
-    store.token = body.token as string
-    if (body.role && body.role.includes("inactive")) {
-      router.push("/activate")
-      router.push("/activate")
+  try {
+    await handleCreateToken(token)
+  } catch (error) {
+    if (error instanceof Error && error.message == "need bind member") {
+      needBindMember.value = true
     } else {
-      router.push("/Events")
+      authenticateFailed.value = true
     }
-  } else {
-    // setTimeout(() => {
-    //   signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
-    // }, 2000)
   }
-}
-
-const { isLoading, error } = useHandleSignInCallback(async () => {
-  await handleCreateToken()
 })
 
 const accountInput = ref({
@@ -64,6 +49,9 @@ const login = async () => {
     hashedPassword = md5(account.password)
   }
   let token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
+  if (!token) {
+    return
+  }
   const res = await window.fetch(`/api/members/${account.id}/logto_id`, {
     method: "PATCH",
     headers: {
@@ -94,15 +82,28 @@ const login = async () => {
     }
     return
   }
-
-  await handleCreateToken()
+  handleCreateToken(token)
 }
 const onRegisterMember = () => {
   router.push({ name: "LoginRegister" })
 }
-onMounted(() => {
-  if (isAuthenticated.value) {
-    handleCreateToken()
+onMounted(async () => {
+  if (!isAuthenticated.value) {
+    return
+  }
+  const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
+  if (!token) {
+    return
+  }
+  try {
+    await handleCreateToken(token)
+  } catch (error) {
+    console.log(error)
+    if (error instanceof Error && error.message == "need bind member") {
+      needBindMember.value = true
+    } else {
+      authenticateFailed.value = false
+    }
   }
 })
 </script>
@@ -152,7 +153,7 @@ onMounted(() => {
           >
             登记信息
           </button>
-        <logout-button class="mt-6 p-2"> 登出 </logout-button>
+          <logout-button class="mt-6 p-2"> 登出 </logout-button>
         </div>
       </div>
     </div>

diff --git a/src/views/Login/LoginActivate.vue b/src/views/Login/LoginActivate.vue
@@ -15,10 +15,19 @@ import LogoutButton from "@/components/LogoutButton.vue"
 import MemberCard from "../MemberManage/MemberCard.vue"
 import { useAccountStore } from "@/stores/account"
 import { useLogto } from "@logto/vue"
+import { onMounted } from "vue"
+import { handleCreateToken } from "./login"
 
-const { signIn, signOut, isAuthenticated, fetchUserInfo, getAccessToken } = useLogto()
+const { signOut, getAccessToken } = useLogto()
 const store = useAccountStore()
 const logOut = () => {
   signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
 }
+onMounted(async () => {
+  const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
+  if (token == undefined) {
+    throw new Error("token is undefined")
+  }
+  handleCreateToken(token)
+})
 </script>
diff --git a/src/views/Login/LoginRegister.vue b/src/views/Login/LoginRegister.vue
@@ -8,6 +8,7 @@ import { useAccountStore } from "@/stores/account"
 import { useLogto } from "@logto/vue"
 import { createTokenViaLogtoToken } from "@/services/logto"
 import type Member from "@/models/member"
+import { handleCreateToken } from "./login"
 
 const store = useAccountStore()
 const { getAccessToken } = useLogto()
@@ -23,33 +24,6 @@ const account = ref({
 })
 const qqRule = ref([{ rule: /[1-9][0-9]{4,14}/, warning: "格式错误" }])
 
-// TODO  move to util
-const handleCreateToken = async () => {
-  const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
-  if (token == undefined) {
-    throw new Error("token is undefined")
-  }
-
-  const res = await createTokenViaLogtoToken(token)
-  const body: unknown = await res.json()
-  if (res.status == 422) {
-    throw new Error(body as string)
-  }
-  if (body instanceof Object && "token" in body && "memberId" in body && "role" in body) {
-    store.account = body as Member
-    store.token = body.token as string
-    if (body.role instanceof Array && body.role.includes("inactive")) {
-      router.push("/activate")
-      router.push("/activate")
-    } else {
-      router.push("/Events")
-    }
-  } else {
-    // setTimeout(() => {
-    //   signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
-    // }, 2000)
-  }
-}
 const activate = async () => {
   const formInput = isFormValid(account.value)
   console.log(formInput)
@@ -67,7 +41,11 @@ const activate = async () => {
     phone: formInput.phone,
     qq: formInput.qq,
   })
-  handleCreateToken()
+  const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
+  if (token == undefined) {
+    throw new Error("token is undefined")
+  }
+  handleCreateToken(token)
 }
 
 onMounted(() => {

diff --git a/src/views/Login/login.ts b/src/views/Login/login.ts
@@ -0,0 +1,27 @@
+import type Member from "@/models/member"
+import router from "@/router"
+import { createTokenViaLogtoToken } from "@/services/logto"
+import { useAccountStore } from "@/stores/account"
+
+export const handleCreateToken = async (token: string) => {
+  const store = useAccountStore()
+  const res = await createTokenViaLogtoToken(token)
+  const body: unknown = await res.json()
+  if (res.status == 422 && body instanceof Object && "message" in body && body.message.includes("not found")) {
+    throw new Error("need bind member")
+  }
+  if (body instanceof Object && "token" in body && "memberId" in body && "role" in body) {
+    store.account = body as Member
+    store.token = body.token as string
+    if (body.role instanceof Array && body.role.includes("inactive")) {
+      router.push("/activate")
+      router.push("/activate")
+    } else {
+      router.push("/Events")
+    }
+  } else {
+    // setTimeout(() => {
+    //   signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
+    // }, 2000)
+  }
+}