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' },
]

我将casl作为插件添加到Nuxt $auth模块中：

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

这是因为我需要在我的插件中访问$auth.user。

除了在我的Nuxt中间件中找不到$abilities或$can之外，所有这些都运行得很好。

PS:我说的是这个包：@casl/vue

Answer 1

在您的中间件中，$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