Javascript 如果用户不'；我在Spring security中没有正确的角色

如果用户不是管理员，我必须隐藏我的一些列。 在HTML中，我有以下代码

<table id="fleetsTable"
    class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Application</th>
            <th>Cubic</th>
            <th>Power</th>
            <th>Euro class</th>
            <th>Engine Type</th>
            <th>Traction</th>
            <th>Transmission</th>
            <th>Cars</th>
            <th sec:authorize="hasRole('ROLE_ADMIN')">Delete</th>
        </tr>
    </thead>
</table>        

在javascript中。 但是我如何避免构建删除按钮呢？html代码仅隐藏列的名称。谢谢

更新：现在我隐藏该列

if (!(document.getElementById("role").value=="[ROLE_ADMIN]")){
        // Get the column API object
        var column = fleetTable.column(8);
        // Toggle the visibility
        column.visible( false);
}

---

但是我不希望创建列

您可以将列数组保留为局部变量。首先按下所需的列，然后根据条件可以按下delete列。然后将这个数组分配给列

if (!(document.getElementById("role").value=="[ROLE_ADMIN]")){
        // Get the column API object
        var column = fleetTable.column(8);
        // Toggle the visibility
        column.visible( false);
}

var cols= [
             { "data": "application" },
             { "data": "cubic" },
             { "data": "power" },
             { "data": "euroClass" },
             { "data": "engineType" },
             { "data": "traction" },
             { "data": "transmission" },

             { 
                 data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-primary" id="showCarsButton">Show cars</button>'; 
                 }

             },
          ];
     if (!(document.getElementById("role").value=="[ROLE_ADMIN]")){
          cols.push( {data:null, render: function ( data, type, row ) {
             return '<button type="button" class="btn btn-danger" id="deleteFleet" data-toggle="modal"'
             +'data-target="#deleteFleetModal">Delete</button>' 
         }
        };

---

很简单。您可以使用

columnDef

的

visible

属性：

columnDefs：[
{目标：8，可见：document.getElementById（'role'）。值=='[role_ADMIN]'}
]

---

…假设它是我们想跳过的第8列-如果

#role

与

[role\u ADMIN]

有任何不同，那么就永远不会创建该列。虽然我来晚了，但我也想分享我的解决方案

在Javascript中（与Laravel一起使用）

---

希望它有帮助

我只需检查$permission上的条件true或false就行了

使用带有Laravel的Javascript

var permission = "{{$permission}}";
$(function() {
var showhideColumns =  permission;
  console.log(showhideColumns);
    $('#tbl-order-items').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 50,
    ajax: "{{ url('/supplier_order/processing_data_order_item_history', 
       ['supplier_order_id'=>$supplier_order_id]) }}",
        columns: [
                  { data: 'image', name: 'image' },
                  { data: 'sku', name: 'sku' },
                  { data: 'product_name', name: 'product_name' },
                  { data: 'status', name: 'status' },
                  { data: 'option', name: 'option' },
                  { data: 'qty', name: 'qty' },
                  { data: 'price', name: 'price' },
                  { data: 'supplier_price', name: 'supplier_price' },
                  { data: 'supplier_actual_price_yuan', name: 
                  'supplier_actual_price_yuan' },
                  { data: 'supplier_actual_price_usd', name: 
                  'supplier_actual_price_usd', visible : showhideColumns  },
                  { data: 'arrived_date', name: 'arrived_date'},
                  { data: 'actions', name: 'actions'}
              ],
              "language": {processing: '<i class="fa fa-spinner fa-spin fa-2x 
              fa-fw" style="color:blue"></i><span class="sr-only">Data is 
               Loading...</span> '},

            });

          });

var permission=“{{$permission}}”；
$（函数（）{
var showhideColumns=权限；
console.log（showhideColumns）；
$（'#待定订单项'）。数据表({
处理：对，
服务器端：是的，
页长：50，
ajax:{{url（'/supplier\u order/processing\u data\u order\u item\u history'，
['supplier\u order\u id'=>$supplier\u order\u id]）}，
栏目：[
{数据：'image'，名称：'image'}，
{数据：'sku'，名称：'sku'}，
{数据：'产品名称'，名称：'产品名称'}，
{数据：'status'，名称：'status'}，
{数据：'option'，名称：'option'}，
{数据：“数量”，名称：“数量”}，
{数据：'price'，名称：'price'}，
{数据：'供应商价格'，名称：'供应商价格'}，
{数据：'供应商\实际\价格\元'，名称：
“供应商实际价格（元）”，
{数据：'供应商\实际\价格\美元'，名称：
“供应商实际价格美元”，可见：showhideColumns}，
{数据：'到达日期'，名称：'到达日期'}，
{数据：'actions'，名称：'actions'}
],
“语言”：{处理：'数据为
正在加载…'}，
});
});

是的，你是对的。我没有想到这个用途。我只修正了你回复中的一个错误。感谢这是一种安全的方式，因为我们在html源代码中有打印角色。用户可以在view source中看到角色名称？？？@prashanth gm您尝试过吗？设置一个列

visible:false

将完全从DOM中删除该列，如上所述，甚至在填充表之前。但是，如果您关心的是机密数据，您永远不应该尝试控制客户端的可见性，用户始终可以在浏览器的“网络”选项卡中查看AJAX响应，他们可以嗅探网络数据等。但这不是上面的问题，问题是关于隐藏某些用户角色的列。这是非常不安全的。@JelleBlaauw，是的。如果OP需要安全性，则应在服务器端创建/不创建列。至少该列不仅仅是隐藏的，它永远不会被创建。在实例化dataTable之前，攻击应该设置

#role

。。。。

 "columns": cols

var role = "{{ Auth::user()->role_id }} ";

$(function(){
    var showAdminColumns =  role ==3 ? true:false;

    $('#datatable').DataTable({
        serverSide:true,
        processing:true,
        pageLength:25,
        ajax:urlMasterData,
        columns:[

            { data:'edit' , name: 'edit' ,visible : showAdminColumns},
            { data:'cancel' , name: 'cancel' ,visible : showAdminColumns},

        ],

    })
})

var permission = "{{$permission}}";
$(function() {
var showhideColumns =  permission;
  console.log(showhideColumns);
    $('#tbl-order-items').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 50,
    ajax: "{{ url('/supplier_order/processing_data_order_item_history', 
       ['supplier_order_id'=>$supplier_order_id]) }}",
        columns: [
                  { data: 'image', name: 'image' },
                  { data: 'sku', name: 'sku' },
                  { data: 'product_name', name: 'product_name' },
                  { data: 'status', name: 'status' },
                  { data: 'option', name: 'option' },
                  { data: 'qty', name: 'qty' },
                  { data: 'price', name: 'price' },
                  { data: 'supplier_price', name: 'supplier_price' },
                  { data: 'supplier_actual_price_yuan', name: 
                  'supplier_actual_price_yuan' },
                  { data: 'supplier_actual_price_usd', name: 
                  'supplier_actual_price_usd', visible : showhideColumns  },
                  { data: 'arrived_date', name: 'arrived_date'},
                  { data: 'actions', name: 'actions'}
              ],
              "language": {processing: '<i class="fa fa-spinner fa-spin fa-2x 
              fa-fw" style="color:blue"></i><span class="sr-only">Data is 
               Loading...</span> '},

            });

          });