CASL Vue - 如何在路由保護中訪問 $can

Question

我正在構建一個 Nuxt 應用程序並嘗試創建一個路由守衛。 如何在我的 Nuxt 中間件中訪問$can ？

export default (context) => {
    const { route } = context
    route.matched.some((routeRecord) => {
        const options = routeRecord.components.default.options
        console.log(options)
        // should use $can here
        return true
    })
}

我在nuxt.config.js中導入以下內容：

plugins: [
    { src: '@plugins/vue-can.js' },
]

我在 Nuxt $auth 模塊上添加casl作為插件：

auth: {
    plugins: [
         '@plugins/vue-casl.js',
    ]
}

這是因為我需要在我的插件中訪問$auth.user 。

所有這些都很好，除了我在 Nuxt 中間件中找不到$abilities或$can 。

---

PS：我說的是這個package： @casl/vue

Answer 1

$abilities和$can應該都可以作為中間件中context object 的屬性使用，因此您應該能夠使用context.$foo訪問它們。

如果您沒有看到它，可能是因為它沒有正確注入。 您在nuxt.config.js中注冊的插件應該使用inject將$can添加到全局 vue 實例並使其作為this和context的屬性可用。 有關詳細信息，請參閱文檔： https://nuxtjs.org/docs/2.x/directory-structure/plugins/#inject-in-root--context