Nuxt配置bundleRenderer自定义can权限指令不生效如何解决？

问题原因 #

• 配置导出语法错误：nuxt.config.js 中使用的 module.export 不符合CommonJS规范，正确写法为 module.exports，语法错误导致整段配置未被正确加载。
• 仅配置了服务端渲染阶段的指令，未注册客户端全局指令：你当前只在bundleRenderer里配置了SSR阶段执行的指令逻辑，页面在客户端完成hydrate（激活）时，客户端侧没有对应的can指令定义，会导致服务端移除的元素被客户端重新渲染，或触发指令未定义的警告。
• 服务端指令逻辑不符合SSR规范：SSR阶段没有真实DOM，你用到的elm.remove()方法不存在或不会作用到最终渲染的HTML上，正确的做法是修改vnode属性让渲染器不输出对应元素。
• 组件场景的指令适配问题：v-can 直接作用在<nuxt-link>这类组件上时，默认可能无法正确定位到要移除的根元素。

修复方案 #

1. 修正配置导出语法 #

将nuxt.config.js开头的module.export修改为module.exports。

2. 注册客户端全局指令 #

在项目plugins目录下新建directives.js文件，写入客户端指令逻辑：

// plugins/directives.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('can', {
    mounted (el, binding, vnode) {
      // 替换为你自己的权限校验逻辑
      const hasPermission = checkUserPermission(binding.value)
      // 兼容组件场景，优先取组件根元素
      const targetEl = vnode.component?.el || el
      if (!hasPermission) {
        targetEl.remove()
      }
    }
  })
})

然后在nuxt.config.js中注册该插件：

module.exports = {
  // 其他原有配置
  plugins: ['~/plugins/directives.js'],
  ssr: true
}

3. 修正服务端指令逻辑 #

修改nuxt.config.js中render.bundleRenderer.directives下的can指令写法，适配SSR规则：

can (vnode, binding) {
  // 替换为你自己的权限校验逻辑，和客户端逻辑保持一致避免hydrate报错
  const hasPermission = checkUserPermission(binding.value)
  if (!hasPermission) {
    vnode.children = []
    vnode.props = {}
    vnode.type = () => null
  }
}

内容的提问来源于stack exchange，提问作者Mohammad Mostafavi