From 59947a35dbd88a5cd9ca1ac5f68f5c3af36fc442 Mon Sep 17 00:00:00 2001 From: Jacky Date: Wed, 23 Oct 2024 11:48:58 +0800 Subject: [PATCH] enhance: user token storage --- app/src/components/TwoFA/Authorization.vue | 2 +- app/src/components/TwoFA/use2FAModal.ts | 9 +-- app/src/lib/http/index.ts | 4 +- app/src/pinia/moudule/user.ts | 90 ++++++++++++++-------- app/src/views/other/Login.vue | 9 +-- 5 files changed, 66 insertions(+), 48 deletions(-) diff --git a/app/src/components/TwoFA/Authorization.vue b/app/src/components/TwoFA/Authorization.vue index d572e552..c6b82388 100644 --- a/app/src/components/TwoFA/Authorization.vue +++ b/app/src/components/TwoFA/Authorization.vue @@ -46,7 +46,7 @@ async function passkeyAuthenticate() { passkeyLoading.value = true try { const begin = await twoFA.begin_start_secure_session_by_passkey() - const asseResp = await startAuthentication(begin.options.publicKey) + const asseResp = await startAuthentication({ optionsJSON: begin.options.publicKey }) const r = await twoFA.finish_start_secure_session_by_passkey({ session_id: begin.session_id, diff --git a/app/src/components/TwoFA/use2FAModal.ts b/app/src/components/TwoFA/use2FAModal.ts index c6be576e..07b39d54 100644 --- a/app/src/components/TwoFA/use2FAModal.ts +++ b/app/src/components/TwoFA/use2FAModal.ts @@ -1,6 +1,5 @@ import { createVNode, render } from 'vue' import { Modal, message } from 'ant-design-vue' -import { useCookies } from '@vueuse/integrations/useCookies' import Authorization from '@/components/TwoFA/Authorization.vue' import twoFA from '@/api/2fa' import { useUserStore } from '@/pinia' @@ -32,11 +31,8 @@ const use2FAModal = () => { return } - const cookies = useCookies(['nginx-ui-2fa']) - const ssid = cookies.get('secure_session_id') - if (ssid && secureSessionStatus) { - resolve(ssid) - secureSessionId.value = ssid + if (secureSessionId.value && secureSessionStatus) { + resolve(secureSessionId.value) return } @@ -51,7 +47,6 @@ const use2FAModal = () => { } const setSessionId = (sessionId: string) => { - cookies.set('secure_session_id', sessionId, { maxAge: 60 * 3 }) close() secureSessionId.value = sessionId resolve(sessionId) diff --git a/app/src/lib/http/index.ts b/app/src/lib/http/index.ts index 3543319c..fb3de769 100644 --- a/app/src/lib/http/index.ts +++ b/app/src/lib/http/index.ts @@ -1,6 +1,5 @@ import type { AxiosRequestConfig } from 'axios' import axios from 'axios' -import { useCookies } from '@vueuse/integrations/useCookies' import { storeToRefs } from 'pinia' import NProgress from 'nprogress' import { useSettingsStore, useUserStore } from '@/pinia' @@ -62,10 +61,9 @@ instance.interceptors.response.use( NProgress.done() const otpModal = use2FAModal() - const cookies = useCookies(['nginx-ui-2fa']) switch (error.response.status) { case 401: - cookies.remove('secure_session_id') + secureSessionId.value = '' await otpModal.open() break case 403: diff --git a/app/src/pinia/moudule/user.ts b/app/src/pinia/moudule/user.ts index c7c77acd..50b03807 100644 --- a/app/src/pinia/moudule/user.ts +++ b/app/src/pinia/moudule/user.ts @@ -1,34 +1,64 @@ import { defineStore } from 'pinia' +import { useCookies } from '@vueuse/integrations/useCookies' +import type { CookieChangeOptions } from 'universal-cookie' -export const useUserStore = defineStore('user', { - state: () => ({ - token: '', - unreadCount: 0, - secureSessionId: '', - passkeyRawId: '', - }), - getters: { - isLogin(state): boolean { - return !!state.token - }, - passkeyLoginAvailable(state): boolean { - return !!state.passkeyRawId - }, - }, - actions: { - passkeyLogin(rawId: string, token: string) { - this.passkeyRawId = rawId - this.login(token) - }, - login(token: string) { - this.token = token - }, - logout() { - this.token = '' - this.passkeyRawId = '' - this.secureSessionId = '' - this.unreadCount = 0 - }, - }, +export const useUserStore = defineStore('user', () => { + const cookies = useCookies(['nginx-ui']) + + const token = ref('') + + watch(token, v => { + cookies.set('token', v, { maxAge: 86400 }) + }) + + const secureSessionId = ref('') + + watch(secureSessionId, v => { + cookies.set('secure_session_id', v, { maxAge: 60 * 3 }) + }) + + function handleCookieChange({ name, value }: CookieChangeOptions) { + if (name === 'token') + token.value = value + else if (name === 'secure_session_id') + secureSessionId.value = value + } + + cookies.addChangeListener(handleCookieChange) + + const passkeyRawId = ref('') + + const unreadCount = ref(0) + const isLogin = computed(() => !!token.value) + const passkeyLoginAvailable = computed(() => !!passkeyRawId.value) + + function passkeyLogin(rawId: string, tokenValue: string) { + passkeyRawId.value = rawId + login(tokenValue) + } + + function login(tokenValue: string) { + token.value = tokenValue + } + + function logout() { + token.value = '' + passkeyRawId.value = '' + secureSessionId.value = '' + unreadCount.value = 0 + } + + return { + token, + unreadCount, + secureSessionId, + passkeyRawId, + isLogin, + passkeyLoginAvailable, + passkeyLogin, + login, + logout, + } +}, { persist: true, }) diff --git a/app/src/views/other/Login.vue b/app/src/views/other/Login.vue index 64c88d7a..1f6782b5 100644 --- a/app/src/views/other/Login.vue +++ b/app/src/views/other/Login.vue @@ -1,7 +1,6 @@