Vue3 Composition API中script setup语法下如何终止后续代码执行

问题根源在于navigateTo是异步操作，调用后不会立即中断当前页面和子组件的代码执行，导致未授权状态下的代码继续运行报错。以下是两种可行的解决方式：

方法一：利用Nuxt路由中间件（推荐） #

将权限校验逻辑移到路由中间件中，中间件会在页面渲染前执行，校验失败时直接终止导航，彻底避免后续代码运行：

1. 创建路由中间件文件middleware/auth-manage-vacancies.js：

export default defineNuxtRouteMiddleware((to, from) => {
  const nuxtApp = useNuxtApp()
  const { isOrganisationAuthor, isSuperAuthor } = require('~/functions/frontendAuthUtils.js')

  const orgOrSuperAuthor = (user) => {
    return user && ((nuxtApp.$globalState.toggledOrganisationInfo && isOrganisationAuthor(user, nuxtApp.$globalState.toggledOrganisationId)) || isSuperAuthor(user))
  }

  if (!orgOrSuperAuthor(nuxtApp.$auth.user)) {
    nuxtApp.$userNotAuthorized()
    return abortNavigation() // 终止导航流程，页面及子组件不会渲染
  }
})

2. 在目标页面中引用该中间件：

<script setup>
import { ref, onMounted, computed } from 'vue'
import ManageVacanciesAndMatchesTabVacancies from '@/components/vacancy/ManageVacanciesAndMatchesTabVacancies.vue'

// 定义页面元信息，指定使用权限校验中间件
definePageMeta({
  middleware: 'auth-manage-vacancies'
})

const nuxtApp = useNuxtApp()
const router = useRouter()
const route = useRoute()

const setIsTabDataLoading = (status) => {
  // 你的加载状态处理逻辑
}
</script>

方法二：修改权限校验函数并添加条件渲染 #

通过抛出错误中断当前页面代码执行，同时通过条件渲染避免子组件加载：

1. 修改useCheckAuth组合式函数，校验失败时抛出错误：

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()
    // 抛出错误中断后续代码执行
    throw new Error('Authorization failed, redirecting to appropriate page')
  }
}

2. 在页面中添加授权状态标记，仅当授权通过时渲染子组件：

<template>
  <!-- 仅授权通过时渲染子组件 -->
  <ManageVacanciesAndMatchesTabVacancies 
    v-if="isAuthorized"
    @loading-data="setIsTabDataLoading" 
  />
</template>

<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 isAuthorized = ref(false)

const orgOrSuperAuthor = (user) => {
  const authResult = user && ((nuxtApp.$globalState.toggledOrganisationInfo && isOrganisationAuthor(user, nuxtApp.$globalState.toggledOrganisationId)) || isSuperAuthor(user))
  isAuthorized.value = authResult
  return authResult
}

// 执行权限校验，失败时抛出错误中断后续代码
useCheckAuth(orgOrSuperAuthor)

const setIsTabDataLoading = (status) => {
  // 你的加载状态处理逻辑
}
</script>

内容的提问来源于stack exchange，提问作者Dennis