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:我说的是这个包：@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-在根目录中——上下文