refactor: simplify usage of authenticateAndLoadUserInfo()

This commit is contained in:
Settel 2022-09-11 20:02:24 +02:00
parent c6f09831e3
commit 449f64e703
6 changed files with 71 additions and 38 deletions

View File

@ -12,7 +12,7 @@
<GameControls /> <GameControls />
</div> </div>
<div v-else class="topbar__actionbar__player"> <div v-else class="topbar__actionbar__player">
{{ game.name }} {{ game?.name }}
</div> </div>
</div> </div>
<div class="topbar__separator" /> <div class="topbar__separator" />
@ -29,7 +29,7 @@ import useI18n from '@/composables/useI18n';
import { useUserinfoStore } from "@/stores/UserinfoStore" import { useUserinfoStore } from "@/stores/UserinfoStore"
import { useGameinfoStore } from "@/stores/GameinfoStore" import { useGameinfoStore } from "@/stores/GameinfoStore"
const { $t, setLang } = useI18n({ const { $t } = useI18n({
'logout': { en: 'Logout', de: 'abmelden' }, 'logout': { en: 'Logout', de: 'abmelden' },
}) })
@ -69,7 +69,8 @@ const actionLogout = async () => {
&__actionbar { &__actionbar {
flex-grow: 1; flex-grow: 1;
&__player { &__player,
&__admin {
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
} }

View File

@ -1,19 +1,37 @@
import { useUserinfoStore } from "@/stores/UserinfoStore" import { navigateTo } from "#app"
import { useUserinfoStore, Userinfo } from "@/stores/UserinfoStore"
import { $fetch } from 'ohmyfetch' import { $fetch } from 'ohmyfetch'
export type AllowRole = '' | 'player' | 'gamemaster' | 'admin'
export type AllowRoles = Array<AllowRole>
export interface useAuth { export interface useAuth {
login(authCode: string): Promise<void> login(authCode: string): Promise<void>
logout(): Promise<void> logout(): Promise<void>
authenticateAndLoadUserInfo(): Promise<void> authenticateAndLoadUserInfo(allowRoles: AllowRoles): Promise<void>
} }
export default (): useAuth => { export default (): useAuth => {
const userInfoStore = useUserinfoStore() const user = useUserinfoStore()
return { return {
authenticateAndLoadUserInfo: async (): Promise<void> => { authenticateAndLoadUserInfo: async (allowRoles: AllowRoles): Promise<void> => {
const userInfo = await $fetch('/api/userinfo') try {
userInfoStore.setUserInfo(userInfo) const userInfo = await $fetch('/api/userinfo') as Userinfo
user.setUserInfo(userInfo)
if (allowRoles.indexOf(userInfo.role) >= 0 ) {
return
}
if (user.isAdmin) {
navigateTo('/admin', { replace: true })
} else {
navigateTo('/play', { replace: true })
}
} catch (e) {
if (allowRoles.indexOf('') == -1 ) {
navigateTo('/', { replace: true })
}
}
}, },
login: async (authCode: string): Promise<void> => { login: async (authCode: string): Promise<void> => {

View File

@ -0,0 +1,23 @@
<template>
<div class="admin__container">
<TopBar />
Admin page
</div>
</template>
<script setup lang="ts">
import useAuth from '@/composables/useAuth'
await useAuth().authenticateAndLoadUserInfo(['admin'])
</script>
<style lang="scss">
@import '~/assets/css/components';
.admin {
&__container {
color: $text-primary-color;
}
}
</style>

View File

@ -2,32 +2,35 @@
<div class="gamemaster__container"> <div class="gamemaster__container">
<TopBar /> <TopBar />
<div class="gamemaster__tiles"> <div class="gamemaster__tiles">
<AdminGameInfoTile :gameinfo="gameinfo" @update="updateGameinfo" /> <AdminGameInfoTile v-if="gameinfo" :gameinfo="gameinfo" @update="updateGameinfo" />
<AdminPlayersTile :gameinfo="gameinfo" @update="updateGameinfo" /> <AdminPlayersTile v-if="gameinfo" :gameinfo="gameinfo" @update="updateGameinfo" />
<div class="gamemaster__tiles-spacer" /> <div class="gamemaster__tiles-spacer" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { navigateTo } from '#app'
import { ref } from 'vue' import { ref } from 'vue'
import useAuth from '@/composables/useAuth' import useAuth from '@/composables/useAuth'
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
import { useUserinfoStore } from "@/stores/UserinfoStore"
import type { GameInfo } from '@/composables/engine.d'
// ensure user is authenticated await useAuth().authenticateAndLoadUserInfo(['gamemaster'])
const { authenticateAndLoadUserInfo } = useAuth()
try {
await authenticateAndLoadUserInfo()
} catch (e) {
navigateTo('/', { replace: true })
}
const { fetchGameInfo } = useEngine() const { fetchGameInfo } = useEngine()
const gameinfo = ref(await fetchGameInfo()) const gameinfo = ref(null as null | GameInfo)
const updateGameinfo = async (): Promise<void> => { const updateGameinfo = async (): Promise<void> => {
const userInfoStore = useUserinfoStore()
if (userInfoStore.gameId) {
gameinfo.value = await fetchGameInfo() gameinfo.value = await fetchGameInfo()
} else {
gameinfo.value = null
} }
}
updateGameinfo()
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -20,7 +20,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRuntimeConfig, navigateTo } from '#app' import { useRuntimeConfig } from '#app'
import { ref } from 'vue' import { ref } from 'vue'
import useAuth from '@/composables/useAuth' import useAuth from '@/composables/useAuth'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
@ -31,12 +31,7 @@ const { $t } = useI18n({
const config = useRuntimeConfig() const config = useRuntimeConfig()
try { await useAuth().authenticateAndLoadUserInfo([''])
await useAuth().authenticateAndLoadUserInfo()
navigateTo('/play', { replace: true })
} catch (e) {
// nop
}
const showCreateTeamDialog = ref(false) const showCreateTeamDialog = ref(false)
const createTeam = () => { showCreateTeamDialog.value = true } const createTeam = () => { showCreateTeamDialog.value = true }

View File

@ -15,20 +15,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { navigateTo, useRoute } from '#app' import { useRoute } from '#app'
import { computed, onMounted, onBeforeUnmount, watch } from 'vue'; import { computed, onMounted, onBeforeUnmount } from 'vue';
import useAuth from '@/composables/useAuth'; import useAuth from '@/composables/useAuth';
import useEngine from '@/composables/useEngine'; import useEngine from '@/composables/useEngine';
import useI18n from '@/composables/useI18n'
import { useGameinfoStore } from "@/stores/GameinfoStore" import { useGameinfoStore } from "@/stores/GameinfoStore"
// ensure user is authenticated await useAuth().authenticateAndLoadUserInfo(['player', 'gamemaster'])
const { authenticateAndLoadUserInfo } = useAuth()
try {
await authenticateAndLoadUserInfo()
} catch (e) {
navigateTo('/', { replace: true })
}
const { start: startEngine, stop: stopEngine } = useEngine() const { start: startEngine, stop: stopEngine } = useEngine()
onMounted(() => startEngine()) onMounted(() => startEngine())