Menggunakan API Komposisi Vue 3 useRouter() di dalam cangkuk onMounted

Question

Saya mahu menggunakan useRoute dalam komponen saya yang dipanggil dalam cangkuk onMounted. Sesuatu yang serupa

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

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

CheckUserAuth.ts ialah:

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 })
}

Saya tidak faham mengapa penghala semakin tidak ditentukan di mana-mana, adakah ada cara untuk membetulkannya tanpa memberikan penghala sebagai parameter? (Saya mahu merangkum sepenuhnya fungsi checkUserAuth)

Saya tahu saya boleh memperbaikinya

const router = useRouter()

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

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

Tetapi ini bukan penyelesaian yang baik

Answer 1

useRouter's API mesti dipanggil dalam persediaan, seperti yang dinyatakan dalam dokumentasi rasmi. Anda boleh melihat ini dalam https://router.vuejs.org/zh/api/#userouter (disebut dalam dokumentasi zh). Mungkin anda boleh menulis kod seperti ini:

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 })
  }
}

dan panggilnya dalam tetapan:

const checkUserAuth = useCheckUserAuth()

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

Semoga membantu.

Answer 2

Bahan kompos harus digunakan terus dalam tetapan melainkan pelaksanaannya membenarkan penggunaan lain, yang perlu ditentukan berdasarkan kes demi kes.

Memandangkan checkUserAuth menggunakan composable, yang menjadikannya composable, jika anda perlu menggunakannya dalam cangkuk yang dipasang, anda perlu mengembalikan fungsi yang membenarkan ini:

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

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

Sebagai alternatif, checkUserAuth 不应使用可组合项。 useUserStore 没有可组合项固有的限制，并且 useRouter boleh digantikan dengan import contoh penghala.