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:
1import { helloAnyone, helloMember, helloAdmin } from 'backend/helloModule.web'; 2// Use this import statment for .web.js modules3
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
40function setupGoodResponse() {41 $w('#errorText').hide();42 $w('#responseText').show();43}44
45function 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
-
Hover over your web module, click the settings icon , and select Edit Web Module Permissions.
-
The web module permissions panel opens and displays each exported function in your web module. Functions that are not exported are not listed.
-
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.
-
Import the
webMethod()
function and thePermissions
enum from the'wix-web-module'
.Copy1import { webMethod, Permissions } from `'wix-web-module'`; -
Write your function and its permissions inside the
webMethod()
function. ThewebMethod()
function takes 2 parameters: a permission and a function. ThePermissions
enum includes the 3 different possible permissions to set. The function is the backend function that you want to export.Copy1export 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:
1import {Permissions, webMethod} from 'wix-web-module';2
3// Anyone can call this function4export const multiply = webMethod(Permissions.Anyone, (a,b) => a * b);5
6// Only members can call this function7export const add = webMethod(Permissions.SiteMember, (a,b) => a + b);8
9// Only admins can call this function10export const subtract = webMethod(Permissions.Admin, (a,b) => a - b);