我正在开发一种CRM。系统具有6个基本用户角色。在前端，我使用VueJS + Twig（稍后您会理解为什么我称其为“前端”），而在后端，则使用Symfony。
每个模块（项目，列表，目标等）都有其控制器+视图（* .html.twig）。每个视图都包含连接到同一视图（模板）中Vue实例的HTML块。
<html>
<body>
<div id="vuecontainer">...</div>
<script>
let vm = new Vue({
...
el: '#vuecontainer',
...
});
</script>
</body>
</html>
对于所有3个（仅作为示例）角色，同一视图的显示应该不同，而对于其余所有角色则完全不显示。
问题是：SPA应用程序使用什么方法来适应不同角色的不同视图-是否存在任何已知的伪标准方法以及每个角色的配置文件？有什么方法可以灵活地构造组件？
目前我正在做什么-在Vue组件的Twig侧使用if-s。
类似于：
{% if me.role.id in [...] %}
...
{% endif %}
...但是，当视图和界面具有复杂的结构并且由多个组件（字段）组成时，每个组件都具有针对每个角色的不同选项集。 >
在统一之前（一个视图-6个角色），我使用了6个视图= 6个角色，但这对所有视图和组件的支持都非常痛苦...继承，if和Twig extends指令。