CASL Vue - 如何在路由守卫中访问 $can

问题描述

我正在构建一个 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：我说的是这个包：@casl/vue

解决方法

$abilities 和 $can 都应该作为中间件中 context 对象的属性可用，因此您应该能够使用 context.$foo 访问它们。

如果你没有看到，可能是因为没有正确注入。您在 nuxt.config.js 中注册的插件应使用 inject 将 $can 添加到全局 vue 实例并使其作为 this 和 context 的属性可用。有关更多详细信息，请参阅文档：https://nuxtjs.org/docs/2.x/directory-structure/plugins/#inject-in-root--context

casl nuxt.js vue.js