如何在Vue.js组件中访问Rails实例变量实现权限控制？

这个需求完全可实现，常用的有3种实现方案：

方案1：通过组件Props传递（最推荐，无全局污染） #

这是最符合Vue最佳实践的方案，实现步骤如下：

1. 在Rails渲染Vue组件的ERB视图文件（比如app/views/results/index.html.erb）中，将@role实例变量序列化后作为Props传给Vue组件：

<results-component :user-role="<%= @role.to_json %>" />

2. 修改你的Vue组件，先声明接收userRole参数，再给链接加上v-if权限判断：

<template>
  <v-container class="my-1 py-0">
    <v-card>
      <a 
        v-if="userRole === 'admin'"
        :href="`/score_cards/new?tournament_match_id=${match.DT_RowId}`"
      >
        Upload Score Card
      </a>
    </v-card>
  </v-container>
</template>

<script>
export default {
  // 声明接收传入的角色参数
  props: ['userRole'],
  // 原有组件逻辑保持不变
}
</script>

方案2：挂载到全局window对象（写法简单，适合全局通用变量） #

如果不想通过Props层层传递，也可以把角色值挂到全局window对象上：

1. 在Rails的ERB视图中插入脚本，注入全局变量：

<script>
window.currentUserRole = <%= @role.to_json %>
</script>

2. Vue组件内直接调用全局变量做判断即可，不需要额外声明Props：

<template>
  <v-container class="my-1 py-0">
    <v-card>
      <a 
        v-if="window.currentUserRole === 'admin'"
        :href="`/score_cards/new?tournament_match_id=${match.DT_RowId}`"
      >
        Upload Score Card
      </a>
    </v-card>
  </v-container>
</template>

方案3：接口请求获取（适合纯前后端分离的单页应用） #

如果你的项目是纯前端单页应用，不依赖Rails服务端模板渲染，可以新增一个后端接口返回当前用户的角色值，Vue组件在挂载时发起请求获取角色值后再做权限判断即可。

注意：传递Rails实例变量到前端时一定要用to_json方法做序列化，不要手动拼接字符串，Rails会自动处理特殊字符转义，避免XSS安全漏洞。

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