Break Item Level Permission Using Javascript/JSOM

Sometimes, we get certain requirements to change the permission of the item; i.e., the item should only be visible to certain groups or members.

Thus, here I am going to share a method to break item level inheritance, using JSOM.

//Params:context - Clientcontext.
//itemId -ID of item.
//person1 - people picker which accepts only a single user.
//person2 - people picker which accepts multiple users.

function BreakSecurityInheritanceAddUser(context, itemId, person1, person2) {
            var oList = context.get_web().get_lists().getByTitle(<List Name>);
            var web = context.get_web();
            var groupNames = web.get_siteGroups();
            var ownerName = "";
            var membername = "";
            var oListItem = oList.getItemById(itemId);
            oListItem.breakRoleInheritance(false);
//This copies only the role of currently logged in user & deletes/does not copy remaining roles.
//if u set it to true it will copy all the roles and u need to delete them manually.
            context.load(groupNames);
            context.executeQueryAsync(function () {
          var groupEnum = groupNames.getEnumerator();
     while (groupEnum.moveNext())
     var grpItem = groupEnum.get_current();
     context.load(grpItem);
                    if (grpItem.get_title() == "* Owners") ownerName = grpItem;
                    if (grpItem.get_title() == "* Members") membername = grpItem;
                }
         if (person1 != null && person1 != "undefined" && person1 != "")
                    var p1 = web.ensureUser(person1);
                    var p2 = [];
                    if (person2 != null && person2 != "undefined" && person2 != "") {
                    for (var i = 0; i < rdrAccess.length; i++) {
                        p2[i] = web.ensureUser(person2[i]);
                    }
                }
                var readerRoleDefinitionBinding = SP.RoleDefinitionBindingCollection.newObject(context);
                readerRoleDefinitionBinding.add(context.get_web().get_roleDefinitions().getByType(SP.RoleType.reader));
                if (person2 != null && person2 != "undefined" && person2 != "") {
                    for (var i = 0; i < person2.length; i++) {
                        if (p2[i] != null) oListItem.get_roleAssignments().add(readerAccess[i], readerRoleDefinitionBinding);
                        context.load(p2[i]);
                    }
                }
                var editRoleDefinitionBinding = SP.RoleDefinitionBindingCollection.newObject(context);
                editRoleDefinitionBinding.add(context.get_web().get_roleDefinitions().getByType(SP.RoleType.editor));
                if (p1 != null) { oListItem.get_roleAssignments().add(assigne, editRoleDefinitionBinding); context.load(p1); }
               if (membername != null) { oListItem.get_roleAssignments().add(membername, editRoleDefinitionBinding); context.load(membername); }
               var adminRoleDefinitionBinding = SP.RoleDefinitionBindingCollection.newObject(context);
                adminRoleDefinitionBinding.add(context.get_web().get_roleDefinitions().getByType(SP.RoleType.administrator));
                if (ownerName != null) { oListItem.get_roleAssignments().add(ownerName, adminRoleDefinitionBinding); context.load(ownerName); }
                context.load(oListItem);
                context.executeQueryAsync(
                               function () {
                                   console.log('Success');
                                   window.location.href = <redirect to allitems page.>;
                               },
                               function (sender, args) {
                                   console.log(args.get_message());
                                   window.location.href =  <redirect to allitems page.>;;
                               });
            }, function (sender, args) {
                alert(args.get_message());
                window.location.href =  <redirect to allitems page.>;
            });
        }

The code, given above, runs fine, when you create the item, as the item has not inherited the permission of the list.
Whenever you are editing the already created item, the code, given above, won’t work.

Since it has already inherited the permission of the list and at that time, you need to copy all the roles and delete the specific roles, which you want to delete. The code, given below, can be referenced-

function BreakSecurityInheritanceAddUser(context, itemId) {
            var oList = context.get_web().get_lists().getByTitle(<List name>);
            var web = context.get_web();
            var groupNames = web.get_siteGroups();//I need to assign item to cretain groups so fetching the groups
            var oListItem = oList.getItemById(itemId); // to get item by itemId
            oListItem.breakRoleInheritance(true);
     //if u set it to false it will copy all the roles and u need to delete them manually.
            var perms = oListItem.get_roleAssignments();
/*Get the RoleAssignments collection for the item */
            context.load(perms);
            context.load(groupNames);
            context.executeQueryAsync(
            function () {
                var groupEnum = groupNames.getEnumerator();
                while (groupEnum.moveNext()) {
                   var grpItem = groupEnum.get_current();
                   context.load(grpItem);
                    if (grpItem.get_title() == "* Owners") ownerName = grpItem;
                    if (grpItem.get_title() == "* members") members = grpItem;
                }
                var RoleAssignments = [];
/*Create an array to store the role assignments so we can delete them later */
                var permEnumerator = perms.getEnumerator();
                while (permEnumerator.moveNext()) { /*Loop through each role assignment... */
                    RoleAssignments.push(permEnumerator.get_current()); /*Add it to our array */
                }

breakinheritance(true)
//use below code to delete the users .make sure u dont delete the current user.else u will be given access denied when u call execute query
                var count = RoleAssignments.length;
                for (var i = 0; i < count; i++) {
/*Loop through our array and tell each RoleAssignment to delete itself */
                    RoleAssignments[i].deleteObject(); }
                context.executeQueryAsync(function () {
                   //Perform Role assignments as above.
     context.executeQueryAsync(
                                   function () {
                                       //alert("Success");
                                       console.log('Success');
                                       window.location.href = <redirect URL>;
                                   },
                                   function (sender, args) {
                                       console.log(args.get_message());
                                   });
                }, function () { }); /*Execute our client side commands */
            }, function (sender, args) { /*Show an error message if something went wrong */
                alert(args.get_message());
            }
            );
        }