Wix Router Intro - Handling routes based on user and database content


 

What is a router?


When the user enters the URL in the browser, the browser forwards the URL data to the server(router) based on the URL the server sends the data back to the browser. In the case of Wix, we can create a router page with dragging and dropping elements and connect the element data based on the router data or we can redirect the User to 403 Page (Unauthorised) or 404 Page(Where there is no data found for that Url).


 

When you should use a router page?

Here are some cases when you need to use wix-router

  1. Having a custom membership built with stripe and check the user is a premium member before redirecting to a premium page

  2. Allow specific content to view in the database


e.g: Let say we have a list of article and if one of the articles is set to public (it should be view by all user). In this case, you will need to use a router to check if the article is public and based on that we can view the article or if it's not a public article, we can show a 403 Unauthorised page


 

Let's get started


In this tutorial, we are building an article page that can be view to the public only (if the article author is set to public).

There will be an Article database with a list of article titles, images, and a public column to store if the article can be view by the public or not. Instead of using a dynamic page. We are going to use a router page. So, we can override the permission, if the article is set to public and this is the safest way, as the article owner can only create, read, update, delete the article and we can also override the data only if the article data is set to public. Let's create a new blank site, and turn on the dev mode.



 

Create a new router page


Router Page is similar to dynamic page. you will design the page usually and add the element and connect the element via code. the data for that page will be passed from the router.



A popup will show as below, enter the router name and click on the "Add & Edit Code"


This will create a routers.js in the backend file


With 2 function

  1. article_Router - So whenever someone goto Url "/article-page", this function will be trigger with the user detail and URL details and it should return either ok(), error page like notFound() or forbidden()

  2. article_SiteMap - This function return an array of available pages to create a sitemap for SEO bot.



Before writing code in the routers.js, let's create a database(Collection).


 

Create a database


Let's create a new collection



Database name and permission

Set it can only view by article owner





Let's create  a three column for simplicity


Sync the data to live database


 

Edit router.js code


URL  : https://salman2301.wixsite.com/wix-router/{router page name}/{article title} E.g: https://salman2301.wixsite.com/wix-router/article/Do-more-in-less-time Do-more-in-less-time is the title of the article title, which we can get from the code and filter the database and view the page Every time if someone lands on the "/article" router will run the below logic

 

Let's breakdown the logic

  • Get the path name from the request URL

  • If the article name matches with the database name, return ok( )

  • Else return notFound( )


  • If the article is public

  • Show the page and handle SEO ( return ok( ) )

  • also add sitemap entry, for SEO bots to index the pages 


  • If the article is not public

  • Check if the user who requested is the owner of the article, if it's true

  • Show the article ( return ok( ) )


  • Return forbidden( ); this will show the 403 Unauthorise page 


 

Commented code


Check the comment explaining the code each line.



// import ok, notFound, forbidden page
// import WixRouterSitemapEntry allow use to create a sitemap
import {ok, notFound, forbidden,  WixRouterSitemapEntry } from "wix-router"; 
// import wixData to query the Article database
import wixData from "wix-data";

// This function will trigger, every time someone requested
// "/article" page
export async function article_Router