How to check current user permissions (SPFx)

Question

How can I check the site permissions of the current user using the SharePoint Framework? How would I go about recreating the following:

var ctx = new SP.ClientContext.get_current();
var web = context.get_web();

var ob = new SP.BasePermissions();
ob.set(SP.PermissionKind.addAndCustomizePages)

var per = web.doesUserHavePermissions(ob)
ctx.executeQueryAsync(
     function(){ 
         alert(per.get_value()); // true if user has permission 
        },
     function(a,b){
         alert ("Something wrong");
 }
);

Answer 1

Most of this comes along for free. The current list item is

this.context.pageContext.listItem.permissions

The current web is

this.context.pageContext.web.permissions

Answer 2

You need to install the typings for Microsoft AJAX and JSOM. To do that run the below commands:

tsd install microsoft.ajax

tsd install sharepoint

After that, you need to add the config.json you need to add below entries:

{
    "sp-init": {
     "path": "https://tenantname.sharepoint.com/_layouts/15/init.js",
     "globalName": "$_global_init"
    },
    "microsoft-ajax": {
     "path": "https://tenantname.sharepoint.com/_layouts/15/MicrosoftAjax.js",
     "globalName": "Sys",
     "globalDependencies": [ "sp-init" ]
    },
    "sp-runtime": {
     "path": "https://tenantname.sharepoint.com/_layouts/15/SP.Runtime.js",
     "globalName": "SP",
     "globalDependencies": [ "microsoft-ajax" ]
    },
    "sharepoint": {
     "path": "https://tenantname.sharepoint.com/_layouts/15/SP.js",
     "globalName": "SP",
     "globalDependencies": [ "sp-runtime" ]
    }
}

Once you have added the entries, you need to add require statements for them in your webpart as below:

require('sp-init');
require('microsoft-ajax');
require('sp-runtime');
require('sharepoint');

After that, inside your render method , you can use that JSOM code that you posted above.

Answer 3

You can either use JSOM after importing it like @gautam-sheth specifies.

Or you can use the SharePoint REST interface at:

https://<site url>/_api/web/doesuserhavepermissions(@v)?@v={'High':'0', 'Low':'262144'}

The high and low values specified is for AddAndCustomizePages.

Answer 4

To solve this I loaded JSOM but couldn't do it from the config.json because I needed a solution that would run from any tenant using relative paths to the external libraries.

I used the web part to load a js file containing the following code. I don't know if this is the best answer, but it worked.

requirejs.config({ enforceDefine: false });

var requireQueue = function (modules, callback) {
    function load(queue, results) {
        if (queue.length) {
            require([queue.shift()], function (result) {
                results.push(result);
                load(queue, results);
            });
        } else {
            callback.apply(null, results);
        }
    }
    load(modules, []);
};

requireQueue([
    '/_layouts/15/init.js',
    '/_layouts/15/MicrosoftAjax.js',
    '/_layouts/15/SP.Runtime.js',
    '/_layouts/15/SP.js'
], function () {
    // JSOM is loaded
});