If you are familiar with SharePoint Framework you must be aware that SPFx apps functions based on current users permission. But how do we know whether user have specific permission on a list or library to implement the functionalities like hide and show the buttons.  

For Ex: Display the add button in a web part only if current user has add permission in that list, how do we achieve this? At the end of this article you will get an answer for this. 

Before proceeding, please go through the below articles to get to know about building SharePoint Framework applications. 

How to build SharePoint Framework Applications? 

The following blog posts will help you for sure in detail about building SPFx applications, 

Build SPFx webparts with Angular 4 

Deep Dive into SPFx webparts configuration 

Build SPFx extensions 

Integrating SPFx apps with visual Studio 

As we are going with JSOM approach we need to load the required scripts for it in your SPFx solutions. To do so let’s load its dependency node modules and configuration setup. 

The below implementation will fit for all type of JS frameworks supported by SharePoint Framework web parts. 

Step 1: 

Go to your tsconfig.json file in the SPFx webpart project and make sure to add the microsoft-ajax and sharepoint types like below, 

“types”: [ 

      “es6-promise”, 

      “webpack-env”, 

      “microsoft-ajax”, 

      “sharepoint” 

    ], 

Step 2: 

Next step is to add the required node module packages to your project through package.json file, open the file and add the dependencies for Microsoft-ajax and sharepoint like below, 

“@types/microsoft-ajax”: “0.0.33”, 

“@types/sharepoint”: “^2013.1.6” 

Now go to your npm command prompt and make sure that the terminal is pointing to your project directory and restore the newly added package dependencies by using the command npm install 

Example: E:your project directory >npm install 

Now we have set all the dependencies the final step is right below. 

Here we are going to read the users EffectiveBasePermissions on a list or library using the JSOM objects and check the permission kind of user on that list. 

To load the scripts, we will be using SPComponentLoader.loadScript and load the JS references listed here in the same order,

 init.js, 
MicrosoftAjas.js,  
 SP.Runtime.js, 
 SP.js,

Import the SPComponentLoader from @microsoft/sp-loader package. 

SharePoint Intranet Software

Permission Kinds 

There are lot of permission kinds available to check against the user, before proceeding next step you need to know all of them. Below is the list of Permission Kinds, 

 emptyMask 
viewListItems 
addListItems 
editListItems 
deleteListItems 
approveItems 
openItems 
viewVersions 
deleteVersions 
cancelCheckout 
managePersonalViews 
manageLists 
viewFormPages 
anonymousSearchAccessList 
open 
viewPages 
addAndCustomizePages 
applyThemeAndBorder 
applyStyleSheets 
viewUsageData 
createSSCSite 
manageSubwebs 
createGroups 
managePermissions 
browseDirectories 
browseUserInfo 
addDelPrivateWebParts 
updatePersonalWebParts 
manageWeb 
anonymousSearchAccessWebLists 
useClientIntegration 
useRemoteAPIs 
manageAlerts 
createAlerts 
editMyUserInfo 
enumeratePermissions 
fullMask

Below is the code snippet to achieve our end goal, here I have added a sample to check whether current user have add permission in a list. 

let siteColUrl = this.context.pageContext.web.absoluteUrl; 

    SPComponentLoader.loadScript(siteColUrl + ‘/_layouts/15/init.js’, { 

      globalExportsName: ‘$_global_init’ 

    }) 

      .then((): Promise<{}> => { 

        return SPComponentLoader.loadScript(siteColUrl + ‘/_layouts/15/MicrosoftAjax.js’, { 

          globalExportsName: ‘Sys’ 

        }); 

      }) 

      .then((): Promise<{}> => { 

        return SPComponentLoader.loadScript(siteColUrl + ‘/_layouts/15/SP.Runtime.js’, { 

          globalExportsName: ‘SP’ 

        }); 

      }) 

      .then((): Promise<{}> => { 

        return SPComponentLoader.loadScript(siteColUrl + ‘/_layouts/15/SP.js’, { 

          globalExportsName: ‘SP’ 

        }); 

      }) 

      .then(() => { 

        var web, clientContext, currentUser, oList; 

        var thisPage = this; 

        clientContext = new SP.ClientContext(this.props.context.pageContext.web.absoluteUrl); 

        web = clientContext.get_web(); 

        currentUser = web.get_currentUser(); 

        oList = web.get_lists().getByTitle(‘ListTitle’); 

        clientContext.load(oList, ‘EffectiveBasePermissions’); 

        clientContext.load(currentUser); 

        clientContext.load(web); 

        clientContext.executeQueryAsync(function () { 

          if (oList.get_effectiveBasePermissions().has(SP.PermissionKind.addListItems)) { 

            //If user have specific permission, your code execution will reach here where you can frame your business logics 

          } 

        }, 

          function (sender, args) { 

            console.log(‘Request failed ‘ + args.get_message() + ‘n’ + args.get_stackTrace()); 

          }); 

      })  

Finally, we were able to check the user permissions on a list/library in SharePoint Framework applications, now its your turn to frame the business logic for your application. 

If you have any questions/issues about this article