fix: frontend mfa token expire (#46)

fedstackjs · Feb 20, 2024 · b57285d · b57285d
1 parent 4f773bd
commit b57285d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/.yarn/versions/e779b5c4.yml b/.yarn/versions/e779b5c4.yml
@@ -0,0 +1,2 @@
+releases:
+  "@aoi-js/frontend": patch
diff --git a/apps/frontend/src/stores/app.ts b/apps/frontend/src/stores/app.ts
@@ -1,7 +1,15 @@
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useAsyncState, useLocalStorage, useTitle, watchDebounced } from '@vueuse/core'
-import { http, isLoggedIn, login, userId } from '@/utils/http'
+import {
+  http,
+  isLoggedIn,
+  isMfaAlive,
+  login,
+  mfaTokenValue,
+  setMfaToken,
+  userId
+} from '@/utils/http'
 import { useRoute, useRouter } from 'vue-router'
 import type { IOrgProfile, IUserProfile } from '@/types'
 
@@ -52,7 +60,8 @@ export const useAppState = defineStore('app_state', () => {
   const navBar = ref<boolean>()
   const title = useTitle()
   const loggedIn = isLoggedIn
-  const mfaToken = useLocalStorage('mfaToken', '', { writeDefaults: false })
+  const mfaAlive = isMfaAlive
+  const mfaToken = mfaTokenValue
 
   const debug = useLocalStorage('aoi-GENSHIN-START!', false, { writeDefaults: false })
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -66,6 +75,7 @@ export const useAppState = defineStore('app_state', () => {
     loggedIn,
     userId,
     mfaToken,
+    mfaAlive,
     user: computed(() => user),
     joinedOrgs: computed(() => joinedOrgs),
     userCapability: withOverride('userCapability', () => user.state.value?.capability ?? '0'),
@@ -85,13 +95,9 @@ export function useMfa() {
   const router = useRouter()
   const route = useRoute()
   return {
-    hasMfaToken: computed(() => {
-      if (!app.mfaToken) return false
-      const { exp } = JSON.parse(atob(app.mfaToken.split('.')[1]))
-      return exp * 1000 > Date.now()
-    }),
+    hasMfaToken: computed(() => app.mfaAlive),
     postVerify: (token: string) => {
-      app.mfaToken = token
+      setMfaToken(token)
       if (route.query.redirect) {
         router.replace(`${route.query.redirect}`)
       } else {

diff --git a/apps/frontend/src/utils/http.ts b/apps/frontend/src/utils/http.ts
@@ -11,6 +11,12 @@ export const userId = computed(
   () => token.value && JSON.parse(atob(token.value.split('.')[1])).userId
 )
 
+const mfaToken = useLocalStorage('aoi-mfa-token', '', { writeDefaults: false })
+export const isMfaAlive = computed(
+  () => mfaToken.value && JSON.parse(atob(mfaToken.value.split('.')[1])).exp * 1000 > Date.now()
+)
+export const mfaTokenValue = computed(() => mfaToken.value)
+
 export const http: typeof ky = ky.create({
   prefixUrl: '/api',
   hooks: {
@@ -36,12 +42,17 @@ export const http: typeof ky = ky.create({
 
 export function logout() {
   token.value = ''
+  mfaToken.value = ''
 }
 
 export function login(_token: string) {
   token.value = _token
 }
 
+export function setMfaToken(_token: string) {
+  mfaToken.value = _token
+}
+
 export async function prettyHTTPError(err: unknown, defaultMsg = `${err}`): Promise<string> {
   if (err instanceof HTTPError) {
     return await err.response