Velo: About Web Module Permissions

Warning: The .jsw web module file extension is being deprecated. You won't be able to create new .jsw files in the code editor. However, .jsw web modules will continue to be supported in existing sites.

Web module permissions allow you to manage and determine which users have the ability to interact with the functionality on your website that relies on the functions provided by your web modules. 

Setting web module permissions also allows you to ensure that no one can access or use your backend code in ways that you didn't intend, either through your site's functionality or using a browser's developer tools.

Note: You should have already learned about web modules before reading this article.

Understanding permissions

Once a function is defined with a permission, that permission is granted whenever the function is called from the frontend. There are 3 options for permissions:

  • Anyone: Any site visitor can call the function from the frontend.
  • SiteMember: Only members logged into the site can call the function from the frontend.
  • Admin: Only site administrators can call the function from the frontend.

Web module permissions example

The following example shows how backend functions with added permissions can only be called by certain types of site visitors.

This example was created using the following code:

Copy
1
import { helloAnyone, helloMember, helloAdmin } from 'backend/helloModule.web';
2
// Use this import statment for .web.js modules
3
4
5
$w.onReady(function () {
6
$w('#anyoneButton').onClick(async () => {
7
try{
8
$w('#responseText').text = await helloAnyone();
9
setupGoodResponse();
10
}
11
catch {
12
$w('#errorText').text = 'Backend call failed. Are you sure you are an anyone?';
13
setupBadResponse();
14
}
15
});
16
17
$w('#memberButton').onClick(async () => {
18
try{
19
$w('#responseText').text = await helloMember();
20
setupGoodResponse();
21
}
22
catch {
23
$w('#errorText').text = 'Backend call failed. Are you logged in?';
24
setupBadResponse();
25
}
26
});
27
28
$w('#adminButton').onClick(async () => {
29
try{
30
$w('#responseText').text = await helloAdmin();
31
setupGoodResponse();
32
}
33
catch {
34
$w('#errorText').text = "Backend call failed. Are you sure you're the admin?";
35
setupBadResponse();
36
}
37
});
38
});
39
40
function setupGoodResponse() {
41
$w('#errorText').hide();
42
$w('#responseText').show();
43
}
44
45
function setupBadResponse() {
46
$w('#errorText').show();
47
$w('#responseText').hide();
48
}

Note: The code example above imports multiple functions from the backend/helloModule.web file. If you are importing functions from the .jsw file, use the following import statement: import { helloAnyone, helloMember, helloAdmin } from 'backend/helloModule';

How to set web module permissions

The method for setting web module permissions depends on the type of web module file you're using.

.jsw file

  1. Hover over your web module, click the settings icon , and select Edit Web Module Permissions.

  2. The web module permissions panel opens and displays each exported function in your web module. Functions that are not exported are not listed.

  3. Click the dropdown next to each function to define its permissions. The choices are:

  • Admin
  • Site member
  • Anyone

Warning: By default, permissions are granted to Anyone for all the functions in your web module.

.web.js file

You set permissions for .web.js web module functions in your backend code inside the webMethod() wrapper function. You cannot export a function or set permissions without the web method. Learn more about .web.js syntax.

  1. Import the webMethod() function and the Permissions enum from the 'wix-web-module'.

    Copy
    1
    import { webMethod, Permissions } from `'wix-web-module'`;
  2. Write your function and its permissions inside the webMethod() function. The webMethod() function takes 2 parameters: a permission and a function. The Permissions enum includes the 3 different possible permissions to set. The function is the backend function that you want to export.

    Copy
    1
    export const multiply = webMethod(Permissions.Admin, (a,b) => a * b)

Below are examples of how to define functions with each type of permission in a .web.js file:

Copy
1
import {Permissions, webMethod} from 'wix-web-module';
2
3
// Anyone can call this function
4
export const multiply = webMethod(Permissions.Anyone, (a,b) => a * b);
5
6
// Only members can call this function
7
export const add = webMethod(Permissions.SiteMember, (a,b) => a + b);
8
9
// Only admins can call this function
10
export const subtract = webMethod(Permissions.Admin, (a,b) => a - b);
Was this helpful?
Yes
No