I have a page template that contains the following sub-component:
<template>
<ManageVacanciesAndMatchesTabVacancies @loading-data="setIsTabDataLoading" />
</template>And the script setup syntax is as follows:
<script setup>
import { ref, onMounted, computed } from 'vue'
import { isOrganisationAuthor, isSuperAuthor } from '../../functions/frontendAuthUtils.js'
import { useCheckAuth } from '@/composables/useCheckAuth.js'
import ManageVacanciesAndMatchesTabVacancies from '@/components/vacancy/ManageVacanciesAndMatchesTabVacancies.vue'
const nuxtApp = useNuxtApp()
const router = useRouter()
const route = useRoute()
const orgOrSuperAuthor = (user) => {
return user && ((nuxtApp.$globalState.toggledOrganisationInfo && isOrganisationAuthor(user, nuxtApp.$globalState.toggledOrganisationId)) || isSuperAuthor(user))
}
useCheckAuth(orgOrSuperAuthor)
</script>useCheckAuth is defined as a composable as such:
export const useCheckAuth = (checkAuthFunction) => {
let nuxtApp = useNuxtApp()
if (!checkAuthFunction) {
throw new Error('You need to pass a function to check the authorization')
}
if (!checkAuthFunction(nuxtApp.$auth.user)) {
nuxtApp.$userNotAuthorized()
}
}And ultimately the userNotAuthorized is defined as a plugin as such:
userNotAuthorized: () => {
nuxtApp.$setStatusCode(401)
let route = nuxtApp._route
let fullPath = route.fullPath
if (nuxtApp.$auth.user) {
if (!fullPath.startsWith(nuxtApp.$findPath('/onvoldoende-rechten'))) {
navigateTo(nuxtApp.$findRoute('/onvoldoende-rechten', {}, null, { redirectUrl: route.fullPath }), { statusCode: 401 })
}
} else if (!fullPath.startsWith(nuxtApp.$findPath('/login'))) {
navigateTo(nuxtApp.$findRoute('/login', {}, null, { redirectUrl: route.fullPath }), { statusCode: 401 })
}
},The problem is that the component ManageVacanciesAndMatchesTabVacancies.vue contains a lot of code in the script setup syntax. Which expects the user to be logged in (it has to do backend calls and others).
But when the useCheckAuth method executes the userNotAuthorized function, all the other code in the script setup block is still being executed. Which ends up for me in the component giving an error rather than the user being redirected to the login page.
Is it possible to stop all code execution after the authCheck returns false?
