Nuxt 3 中每个用户的自定义路由

Question

比方说，我有 2 种用户类型：

admin

和

client

以及以下目录结构：

pages/admin/products.vue
pages/admin/settings.vue
pages/client/products.vue

• 当类型为

  admin

  的用户前往

  /products

  时 – 使用

  pages/admin/products.vue

• 当

  client

  类型的用户前往

  /products

  页面时 – 使用

  pages/client/products.vue

• 当类型为

  admin

  的用户前往

  /settings

  时 – 使用

  pages/admin/settings.vue

• 当类型为

  client

  的用户前往

  /settings

  时 – 找不到 404，因为没有

  pages/client/settings.vue

  页面

换句话说，我希望每个用户都有自己的路线

我该如何解决这个问题？我已经尝试过router.options.ts。但我无法从那里获取当前授权用户的实例来读取其类型。如果可以的话，根据需要修改路线就没问题了：

// app/router.options.ts

import type { RouterConfig } from "@nuxt/schema"

export default <RouterConfig>{
  routes(routes) {
    const { user } = useAuthStore() // Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
    if (user.type === 'admin') {
      // return admin routes 
    } else {
      // return client routes
    }
  }
}

Answer 1

你们的商店是自动导入的吗？通常我必须在使用之前导入 pinia 商店。 示例

import { useAuthStore } from '@/stores/auth'
const store = useAuthStore()