CASL Vue - 如何在路由保护中访问 $can答案

【问题标题】：CASL Vue - How to access $can in route guardCASL Vue - 如何在路由保护中访问 $can
【发布时间】：2021-06-26 01:26:38
【问题描述】：

我正在构建一个 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

【问题讨论】：

标签： vue.js nuxt.js casl

【解决方案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

【讨论】：