fix server side code

This commit is contained in:
ClasWen 2024-08-24 17:12:25 +08:00
parent a29e54b0e9
commit 4cd0487bdc
3 changed files with 18 additions and 11 deletions

View file

@ -1,29 +1,35 @@
<script setup lang="ts"> <script setup lang="ts">
import { makeLogtoClient } from "../utils/auth"
import { onMounted, ref } from "vue" import { onMounted, ref } from "vue"
import { logtoClient } from "../utils/auth"
import type { IdTokenClaims } from "@logto/browser" import type { IdTokenClaims } from "@logto/browser"
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue" import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"
import type LogtoClient from "@logto/browser"
const logtoClient = ref<LogtoClient>()
const onSignIn = async () => { const onSignIn = async () => {
logtoClient.signIn(import.meta.env.PUBLIC_LOGTO_CALLBACK_URL) logtoClient.value?.signIn(import.meta.env.PUBLIC_LOGTO_CALLBACK_URL)
} }
const onSignOut = async () => { const onSignOut = async () => {
logtoClient.signOut(import.meta.env.PUBLIC_LOGTO_REDIRECT_URL) logtoClient.value?.signOut(import.meta.env.PUBLIC_LOGTO_REDIRECT_URL)
} }
const isAuthenticated = ref<boolean>() const isAuthenticated = ref<boolean>()
const userInfo = ref<IdTokenClaims>() const userInfo = ref<IdTokenClaims>()
const initAuth = async () => { const initAuth = async () => {
if(!logtoClient.value){
return
}
try { try {
await Promise.all([ await Promise.all([
userInfo.value = await logtoClient.getIdTokenClaims(), (userInfo.value = await logtoClient.value.getIdTokenClaims()),
isAuthenticated.value = await logtoClient.isAuthenticated() (isAuthenticated.value = await logtoClient.value.isAuthenticated()),
]) ])
} catch (error) { } catch (error) {
isAuthenticated.value = false isAuthenticated.value = false
} }
} }
onMounted(() => { onMounted(() => {
logtoClient.value = makeLogtoClient()
initAuth() initAuth()
}) })
</script> </script>

View file

@ -1,7 +1,7 @@
<div></div> <div></div>
<script> <script>
import { logtoClient } from "../utils/auth" import { makeLogtoClient } from "../utils/auth"
import LogtoClient from "@logto/browser" import LogtoClient from "@logto/browser"
const callbackHandler = async (logtoClient: LogtoClient) => { const callbackHandler = async (logtoClient: LogtoClient) => {
@ -18,6 +18,6 @@ const callbackHandler = async (logtoClient: LogtoClient) => {
window.location.assign("/") window.location.assign("/")
} }
} }
const logtoClient = makeLogtoClient()
callbackHandler(logtoClient) callbackHandler(logtoClient)
</script> </script>

View file

@ -1,6 +1,7 @@
import LogtoClient from "@logto/browser" import LogtoClient from "@logto/browser"
export const logtoClient = new LogtoClient({ export const makeLogtoClient = () =>
endpoint: import.meta.env.PUBLIC_LOGTO_ENDPOINT, new LogtoClient({
appId: import.meta.env.PUBLIC_LOGTO_APP_ID, endpoint: import.meta.env.PUBLIC_LOGTO_ENDPOINT,
}) appId: import.meta.env.PUBLIC_LOGTO_APP_ID,
})