Vue 3 Composition API useRouter() inside onMounted hook - vue.js

Question

I want to use useRoute inside my component which is called in onMounted hook.
Something like
import { checkUserAuth } from '#/common/CheckUserAuth'
onMounted(async () => {
await checkUserAuth()
})
And CheckUserAuth.ts is:
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 })
}
I don't understand why the router is indefined everywhere and is it possible to solve this without passing the router as an argument? (i want to make the checkUserAuth function fully encapsulated)
i know i can fix it like
const router = useRouter()
onMounted(async () => {
await checkUserAuth(router)
})
export const checkUserAuth = async (router: Router) => {
await router.push({ name: DASHBOARD_ROUTE })
}
But it's not good solution

Answer 1

The API of useRouter must be called in setup, as mentioned in the official document. You can see this point in https://router.vuejs.org/zh/api/#userouter(zh document mentioned it).
Maybe you can write code like this:
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 })
}
}
And call it in setup:
const checkUserAuth = useCheckUserAuth()
onMounted(() => {
checkUserAuth()
})
hope it can help you.

Answer 2

Composables are supposed to be used directly in setup, unless their implementation allows for other usage, this needs to be determined for each case.
Since checkUserAuth uses composables, this makes it a composable either, in case it needs to be used in mounted hook, it needs to return a function that allows this:
const useUserAuth = () => {
const router = useRouter()
const userStore = useUserStore()
const userApi = new UserApi()
return {
async check() {...}
}
}
Alternatively, checkUserAuth shouldn't use composables. useUserStore doesn't have restrictions that are inherent to composable, and useRouter can be replaced with an import of router instance.