Utilisation de l'API de composition Vue 3 useRouter() dans le hook onMounted

Question

Je souhaite utiliser useRoute dans mon composant qui est appelé dans le hook onMounted. Quelque chose de similaire

import { checkUserAuth } from '@/common/CheckUserAuth'

onMounted(async () => {
  await checkUserAuth()
})

CheckUserAuth.ts est :

import { useRouter } from 'vue-router'

const router = useRouter() // here router is undefined

export const checkUserAuth = async () => {
  const userStore = useUserStore()
  const userApi = new UserApi()
  const token = localStorage.getItem(TOKEN_NAME)

  const router = useRouter() // and here too router is undefined

  if (!token) {
    await router.push({ name: LOGIN_PAGE_ROUTE })

    return
  }

  const userData = await userApi.fetchMasterInfo()
  userStore.setUser(userData)
  await router.push({ name: DASHBOARD_ROUTE })
}

Je ne comprends pas pourquoi le routeur n'est plus défini partout, existe-t-il un moyen de résoudre ce problème sans passer le routeur en paramètre ? (Je veux encapsuler complètement la fonction checkUserAuth)

Je sais que je peux le réparer

const router = useRouter()

onMounted(async () => {
  await checkUserAuth(router)
})

export const checkUserAuth = async (router: Router) => {
  await router.push({ name: DASHBOARD_ROUTE })
}

Mais ce n'est pas une bonne solution

Answer 1

L'API de

useRouter doit être appelée lors de la configuration, comme mentionné dans la documentation officielle. Vous pouvez le voir sur https://router.vuejs.org/zh/api/#userouter (mentionné dans la documentation zh). Peut-être que vous pouvez écrire du code comme celui-ci :

import { useRouter } from 'vue-router'

export const useCheckUserAuth = () => {
  const userStore = useUserStore()
  const router = useRouter()

  returnv aysnc function checkUserAuth() {
    const userApi = new UserApi()
    const token = localStorage.getItem(TOKEN_NAME)
    if (!token) {
      await router.push({ name: LOGIN_PAGE_ROUTE })
  
      return
    }
  
    const userData = await userApi.fetchMasterInfo()
    userStore.setUser(userData)
    await router.push({ name: DASHBOARD_ROUTE })
  }
}

et appelez-le dans les paramètres :

const checkUserAuth = useCheckUserAuth()

onMounted(() => {
  checkUserAuth()
})

J'espère que cela aide.

Answer 2

Les Composables doivent être utilisés directement dans les décors sauf si leur mise en œuvre permet d'autres utilisations, ce qui doit être déterminé au cas par cas.

Puisque checkUserAuth utilise un composable, ce qui le rend composable, si vous devez l'utiliser dans un hook installé, vous devez renvoyer une fonction qui permet cela :

const useUserAuth = () => {
  const router = useRouter()
  const userStore = useUserStore()
  const userApi = new UserApi()

  return {
    async check() {...}
  }
}

Alternativement, checkUserAuth 不应使用可组合项。 useUserStore 没有可组合项固有的限制，并且 useRouter peut être remplacé par une importation de l'instance du routeur.