Permission

This application would have various kind of permissions.
For exmaple, Admin user will get READ/WRITE permission for all the tables and he would able to Create, Read, Update as well as Delete some contents.
And there might be exist other permissions that have Read permission only or even don't have permission for specific table.
So we implemented permission based routing as well as permisssion based menu and some buttons like Add or Delete will be displayed based on user's permission.

Role based routing

Article and Barcode Table related routes are protected with user's permission.
For example, the user with READ permission for Article table should not able to access /add-article route as well as /article/edit/[id] route. Permission for Barcode table related routes works same as Article table.

When user has WRITE permission, he will access all the route but when user do not have any permission for specific table, he won't able to access above links as well as listing pages like /articles or /barcodes.

URLs that allowed in WRITE mode and none-permissioned mode are defined here:

helpers/constants/index.ts

export const PermissionTable = [
    {
        tableName: 'ARTICLE',
        writeModeUrls: ['/article/edit/', '/add-article'],
        nonePermissionUrls: ['/article/edit/', '/add-article', '/articles']
    },
    {
        tableName: 'BARCODE',
        mode: 'READ',
        writeModeUrls: ['/barcode/edit/', '/add-barcode'],
        nonePermissionUrls: ['/barcode/edit/', '/add-barcode', '/barcodes']
    }
];

In the future, we can expand permission for other tables by defining URLs like above. Then it will handle route protection in basic level of appication (in _app.ts)

For the moment:

• User with READ permission for article table can only able to access /articles page and can read detailed page of specific article /article/[id]. /article/edit/[id], /add-article is forbidden URL.

• User with WRITE permission for article table is allowed to access all pages related to Article Page

• User with READ permission for barcode table can only able to access /barcodes page and can read detailed page of specific barcode /barcode/[id]. /barcode/edit/[id], /add-barcode is forbidden URL.

• User with WRITE permission for barcode table is allowed to access all pages related to Barcode Page

Role based menu and features

Permission based feature also should work for menu and some buttons in specific table's page. When user does not have permission for Barcode or Article page, he should not able to see them in side menu and when he does not have WRITE permission, he should not see Add, Edit, Delete button.

So for example, we implemented it like this:

...
import { useAppState } from 'context/AppContext';

const Articles = () => {
    const { t } = useTranslation();
    const { permissions } = useAppState();
    const mode =
        !!permissions &&
        permissions.find((p: any) => {
            return p.table == Table.Article;
        })?.mode;
    ...
    {mode == Mode.Write ? (
        <LinkButton
            title={t('actions:add2', { name: t('common:article') })}
            path="/add-article"
            type="primary"
        />
    ) : (
        <></>
    )}
    
}