I want to use useRoute
in my component which is called in onMounted hook.
Something similar
import { checkUserAuth } from '@/common/CheckUserAuth' onMounted(async () => { await checkUserAuth() })
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 undefined everywhere, is there any way to fix this without passing the router as a parameter? (I want to completely encapsulate the checkUserAuth function)
I know I can fix it
const router = useRouter() onMounted(async () => { await checkUserAuth(router) }) export const checkUserAuth = async (router: Router) => { await router.push({ name: DASHBOARD_ROUTE }) }
But this is not a good solution
P粉4690907532023-11-24 09:39:16
The API of useRouter must be called in setup, as mentioned in the official documentation. You can see this in https://router.vuejs.org/zh/api/#userouter (mentioned in zh documentation). 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 settings:
const checkUserAuth = useCheckUserAuth() onMounted(() => { checkUserAuth() })
hope it helps you.
P粉8484421852023-11-24 00:28:49
Composable items should be used directly in settings unless their implementation allows other uses, which needs to be determined on a case-by-case basis.
Since checkUserAuth uses a composable, which makes it composable, if you need to use it within an installed hook, you need to return a function that allows this:
const useUserAuth = () => { const router = useRouter() const userStore = useUserStore() const userApi = new UserApi() return { async check() {...} } }
Alternatively, checkUserAuth
composables should not be used. useUserStore
has no limitations inherent in composable items, and useRouter
can be replaced with an import of a router instance.