Add component \ Private for routing by roles

src/App.js

@@ -8,7 +8,7 @@ import locale from "antd/lib/locale/ru_RU"
 import Login from './pages/Login'
 import Main from './pages/Main'
 import { OpenAPI } from './services/api'
-import { PrivateRoute } from './components/PrivateRoute'
+import { PrivateRoute } from './components/Private'
 
 //OpenAPI.BASE = 'http://localhost:3000'
 OpenAPI.TOKEN = localStorage['token']

src/components/Private/PrivateContent.jsx

@@ -0,0 +1,24 @@
+const admins = ['администратор', 'админ', 'admin']
+
+export const isInRole = (roles) => {
+  if(!roles?.length)
+    return true
+  const role = localStorage['roleName']?.toLowerCase()
+  if(admins.indexOf(role) > -1)
+    return true
+  for(const r of roles)
+    if(r.toLowerCase() === role)
+      return true
+  return false
+}
+
+export const privateContent = (roles, children) => {
+  if(isInRole(roles))
+    return children
+  else
+    return null
+}
+
+export const PrivateContent = ({roles, children}) => {
+  return privateContent(roles, children)
+}

src/components/Private/PrivateMenuItem.jsx

@@ -0,0 +1,11 @@
+import { Menu } from "antd";
+import { isInRole } from './PrivateContent'
+
+export const PrivateMenuItem = ({ children, roles, ...other }) => {
+  if(!isInRole(roles))
+    return null
+
+  return <Menu.Item {...other}>
+      {children}
+    </Menu.Item>;
+}

src/components/Private/index.ts

@@ -0,0 +1,3 @@
+export {PrivateRoute} from './PrivateRoute'
+export {privateContent, PrivateContent} from './PrivateContent'
+export {PrivateMenuItem} from './PrivateMenuItem'

src/pages/Documents/menuItems.jsx

@@ -1,10 +1,11 @@
-import { Menu } from "antd";
+//import { Menu } from "antd";
 import { FolderOutlined } from "@ant-design/icons";
 import { Link, Route} from "react-router-dom";
 import DocumentsTemplate from './DocumentsTemplate'
+import {PrivateMenuItem} from '../../components/Private'
 
 export const documentCategories = [
-  {id:1, key:'fluidService', title:'Растворный сервис'},
+  {id:1, key:'fluidService', title:'Растворный сервис'/*, roles:['ff']*/},
   {id:2, key:'cementing', title:'Цементирование'},
   {id:3, key:'nnb', title:'ННБ'},
   {id:4, key:'gti', title:'ГТИ'},
@@ -14,11 +15,11 @@ export const documentCategories = [
 ]
 
 const makeMenuItem = (keyValue, rootPath, title, other) => (
-  <Menu.Item className="ant-menu-item" 
+  <PrivateMenuItem className="ant-menu-item" 
     key={`${keyValue}`} 
     {...other}>
     <Link to={{pathname: `${rootPath}/${keyValue}`}}>{title}</Link>
-  </Menu.Item>)
+  </PrivateMenuItem>)
 
 const makeRouteItem = (keyValue, rootPath, other) => (
   <Route 

src/pages/Measure/index.jsx

@@ -2,11 +2,11 @@ import { columnsMudDiagram} from './columnsMudDiagram'
 import { columnsDrillingFluid} from './columnsDrillingFluid'
 import { columnsNnb } from './columnsNnb'
 import { MeasureTable } from './MeasureTable'
-import { MeasureTable2 } from './MeasureTable2'
+//import { MeasureTable2 } from './MeasureTable2'
 
 export default function Measure({idWell}){
   return <>  
-    <MeasureTable2
+    <MeasureTable
       idWell={idWell}
       idCategory={1} 
       title='Замер бурового раствора'

src/pages/Well.jsx

@@ -17,6 +17,7 @@ import Measure from "./Measure";
 import { makeMenuItems } from "./Documents/menuItems";
 import WellOperations from "./WellOperations";
 import DrillingProgram from "./Documents/DrillingProgram";
+import {PrivateMenuItem} from '../components/Private'
 
 const { Content } = Layout;
 
@@ -26,30 +27,28 @@ export default function Well() {
 
   const { SubMenu } = Menu;
 
-  return (
+  return <Layout>
-    <>
-      <Layout>
         <Menu
           mode="horizontal"
           selectable={true}
           selectedKeys={[tab]}
           className="well_menu"
         >
-          <Menu.Item key="telemetry" icon={<FundViewOutlined />}>
+          <PrivateMenuItem key="telemetry" icon={<FundViewOutlined />}>
             <Link to={`${rootPath}/telemetry`}>Мониторинг</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
-          <Menu.Item key="message" icon={<AlertOutlined />}>
+          <PrivateMenuItem key="message" icon={<AlertOutlined/>} roles={[]}>
-            <Link to={`${rootPath}/message`}>Сообщения</Link>
+              <Link to={`${rootPath}/message`}>Сообщения</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
-          <Menu.Item key="report" icon={<FilePdfOutlined />}>
+          <PrivateMenuItem key="report" icon={<FilePdfOutlined />}>
             <Link to={`${rootPath}/report`}>Рапорт</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
-          <Menu.Item key="operations" icon={<FolderOutlined />}>
+          <PrivateMenuItem key="operations" icon={<FolderOutlined />}>
             <Link to={`${rootPath}/operations/plan`}>Операции по скважине</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
-          <Menu.Item key="archive" icon={<DatabaseOutlined />}>
+          <PrivateMenuItem key="archive" icon={<DatabaseOutlined />}>
             <Link to={`${rootPath}/archive`}>Архив</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
           <SubMenu
             key="document"
             title={
@@ -65,12 +64,12 @@ export default function Well() {
           >
             {makeMenuItems(rootPath)}
           </SubMenu>
-          <Menu.Item key="measure" icon={<ExperimentOutlined />}>
+          <PrivateMenuItem key="measure" icon={<ExperimentOutlined />}>
             <Link to={`${rootPath}/measure`}>Измерения</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
-          <Menu.Item key="drillingProgram" icon={<FolderOutlined />}>
+          <PrivateMenuItem key="drillingProgram" icon={<FolderOutlined />}>
             <Link to={`${rootPath}/drillingProgram`}>Программа бурения</Link>
-          </Menu.Item>
+          </PrivateMenuItem>
         </Menu>
 
         <Layout>
@@ -107,6 +106,4 @@ export default function Well() {
           </Content>
         </Layout>
       </Layout>
-    </>
-  );
 }