ASP.NET MVC，如何将Razor授权角色与Angular9 + / React或类似的基于NodeJS / Webpack的fronentend框架相结合

如何解决ASP.NET MVC，如何将Razor授权角色与Angular9 + / React或类似的基于NodeJS / Webpack的fronentend框架相结合

在我们的应用程序中，我们具有用于不同功能的复杂的用户角色层次结构。 它包含这些角色特定功能的Razor和Javascript。

我们想尝试在使用时迁移到Angular 9+或ReactJS之类的前端框架 已编译的Razor页面，用于基于角色的授权和安全性。

希望对于普通用户，即使在检查页面和检查源代码部分时，角色特定的Angular或React代码都不应该可见。

使用Angular9 + / React甚至可能吗？如果是这样，一些方法是什么？

作为示例，我们将JQuery和Razor绑定到特定的基于角色的功能，如下所示：-

@Model ReportsVM

@if (User.IsInRole("ReportAdmin"))
{
  @section scripts {

    <script type="text/javascript">

      var showPercentage = '@ViewBag.ShowPercentage'; // this is configured elsewhere and stored in session

      $(function(){

        function checkProgress(){
        
          var url = "@Url.Action("CheckProgress","Reports")?showPercentage=" + showPercentage;

          $.get( url,function( data ) {
            $( ".result" ).append( data );
          });
        }
      
      })
    
    </script>

  }
}

<div class="container">

   @if (User.IsInRole("ReportAdmin"))
   {
      <span class="result"></span>
      <button onclick="checkProgress()" />

      // also,some upload functionality for report admins...
   }     
  <ul class="list_group">

    @for(int x = 0; x < Model.Reports.Count(); x++)
    {
      <li class="list_group_item">
        @Html.ActionLink("Reports","Index",new { reportId = Model.Reports[x].Id })
      </li>
    }
  </ul>
</div>