Handled Enable / Disable of a control from RBAC Control panel

Author: foyzulkarim

client/public/index.html

@@ -25,6 +25,7 @@
  <title>React App</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+ <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>

client/public/styles.css

@@ -0,0 +1,4 @@
+.disable-control {
+ pointer-events: none;
+ color: gray;
+ }

client/src/App.js

@@ -2,7 +2,7 @@ import React, { } from 'react';
 import './App.css';
 import { BrowserRouter as Router, Switch, Route, Link, Redirect, useHistory } from "react-router-dom";
 import { useSelector, useDispatch } from 'react-redux';
-import { PostCreate, Posts, Home } from "./components/Posts";
+import { PostCreate, Posts, Home, PostDetail, PostEdit, PostDelete } from "./components/Posts";
 import { Login } from "./components/Login";
 import { Register } from "./components/Register";
 import { Constants } from "./constants";
@@ -73,14 +73,17 @@ const App = () => {
  //console.log('userContext', userContext);
 
  let links = [
- { name: 'link-posts', url: '/posts', text: 'Posts', component: Posts },
- { name: 'link-post-create', url: '/post-create', text: 'Create post', component: PostCreate },
- { name: 'link-permission-create', url: '/permission-create', text: 'Create permission', component: PermissionCreate },
- { name: 'link-permission-list', url: '/permission-list', text: 'List permissions', component: PermissionList },
- { name: 'link-role-create', url: '/role-create', text: 'Create role', component: RoleCreate },
- { name: 'link-role-list', url: '/role-list', text: 'List role', component: RoleList },
- { name: 'link-resource-create', url: '/resource-create', text: 'Create resource', component: ResourceCreate },
- { name: 'link-resource-list', url: '/resource-list', text: 'List resource', component: ResourceList },
+ { name: 'link-posts', url: '/posts', text: 'Posts', component: Posts, isRootMenu: true },
+ { name: 'link-post-create', url: '/post-create', text: 'Create post', component: PostCreate, isRootMenu: true },
+ { name: 'link-post-detail', url: '/post-detail/:id', text: 'Detail post', component: PostDetail },
+ { name: 'link-post-edit', url: '/post-edit/:id', text: 'Edit post', component: PostEdit },
+ { name: 'link-post-delete', url: '/post-delete/:id', text: 'Delete post', component: PostDelete },
+ { name: 'link-permission-create', url: '/permission-create', text: 'Create permission', component: PermissionCreate, isRootMenu: true },
+ { name: 'link-permission-list', url: '/permission-list', text: 'List permissions', component: PermissionList, isRootMenu: true },
+ { name: 'link-role-create', url: '/role-create', text: 'Create role', component: RoleCreate, isRootMenu: true },
+ { name: 'link-role-list', url: '/role-list', text: 'List role', component: RoleList, isRootMenu: true },
+ { name: 'link-resource-create', url: '/resource-create', text: 'Create resource', component: ResourceCreate, isRootMenu: true },
+ { name: 'link-resource-list', url: '/resource-list', text: 'List resource', component: ResourceList, isRootMenu: true },
  ];
 
  // let routes = [
@@ -100,7 +103,7 @@ const App = () => {
  <>
  {
  links.map((link, index) => {
- return checkPermission(link.name, userContext) && <Link key={index} to={link.url} className="list-group-item list-group-item-action bg-light">{link.text}</Link>
+ return checkPermission(link.name, userContext) && link.isRootMenu && <Link key={index} to={link.url} className="list-group-item list-group-item-action bg-light">{link.text}</Link>
  })
  }
  </>

client/src/components/Permission.js

@@ -80,6 +80,11 @@ export const PermissionCreate = () => {
  <label><Field type="checkbox" name="isAllowed" /></label>
  <ErrorMessage className="col-sm-2 col-form-label text-danger" name="isAllowed" component="div" />
  </div>
+ <div className="form-group row">
+ <label htmlFor="isDisabled" className="col-sm-2 col-form-label">Is disabled</label>
+ <label><Field type="checkbox" name="isDisabled" /></label>
+ <ErrorMessage className="col-sm-2 col-form-label text-danger" name="isDisabled" component="div" />
+ </div>
  <div className="form-group row">
  <label htmlFor="name" className="col-sm-2 col-form-label"></label>
  <button type="submit" disabled={isSubmitting}>Submit</button>
@@ -118,6 +123,7 @@ export const PermissionList = () => {
  <th>Resource</th>
  <th>Role</th>
  <th>Is allowed</th>
+ <th>Is disabled</th>
  </tr>
  </thead>
  <tbody>
@@ -129,6 +135,7 @@ export const PermissionList = () => {
  <td>{resource.resourceName}</td>
  <td>{resource.roleName}</td>
  <td>{resource.isAllowed.toString()}</td>
+ <td>{resource.isDisabled.toString()}</td>
  </tr>
  )
  })

client/src/components/Posts.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
 import { useForm } from 'react-hook-form';
 import { useSelector, useDispatch } from 'react-redux';
-import { checkPermission } from "../utils/permissionManager.js";
+import { checkPermission, checkIsDisabled } from "../utils/permissionManager.js";
 
 export const SecuedLink = ({ resource, text, url }) => {
 
@@ -13,8 +13,9 @@ export const SecuedLink = ({ resource, text, url }) => {
  console.log('SecuedLink ', resource, text, url);
 
  const isAllowed = checkPermission(resource, userContext);
+ const isDisabled = checkIsDisabled(resource, userContext);
 
- return (isAllowed && <Link to={() => url}>{text}</Link>)
+ return (isAllowed && <Link className={isDisabled ? "disable-control" : ""} to={() => url}>{text}</Link>)
 }
 
 export const Home = () => {
@@ -199,9 +200,8 @@ export const PostSummary = (post) => {
  <h3>{post.title}</h3>
  <img src={post.imgUrl} style={{ height: "50px", width: "50px" }} alt="post img" className="pull-left thumb margin10 img-thumbnail"></img>
  <p>{post.emText}</p>
- <Link to={() => `/post-detail/${post.id}`}>Detail</Link> &nbsp;
- <Link to={() => `/post-edit/${post.id}`}>Edit</Link> &nbsp;
- {/* <Link to={() => `/post-delete/${post.id}` style={{ pointerEvents: 'none' }}}>Delete</Link> &nbsp; */}
+ <SecuedLink resource='link-post-edit' url={`/post-detail/${post.id}`} text='Detail'></SecuedLink>&nbsp;
+ <SecuedLink resource='link-post-edit' url={`/post-edit/${post.id}`} text='Edit'></SecuedLink>&nbsp;
  <SecuedLink resource='link-post-delete' url={`/post-delete/${post.id}`} text='Delete'></SecuedLink>
  </div>
  )
@@ -313,6 +313,7 @@ export const PostDetail = () => {
 
  let fetchData = (id) => {
  dispatch({ type: "FETCH_POST_DETAIL", payload: id });
+ dispatch({ type: "FETCH_COMMENTS", payload: id, });
  }
 
  useEffect(() => {
@@ -323,6 +324,10 @@ export const PostDetail = () => {
  return state.posts.selectedPost;
  });
 
+ const comments = useSelector(state => {
+ return state.posts.selectedComments;
+ });
+
  let match = useRouteMatch();
 
  return (
@@ -331,6 +336,7 @@ export const PostDetail = () => {
  <h2>{post.title}</h2>
  <img src={post.imgUrl} style={{ height: "50px", width: "50px" }} alt="post img" className="pull-left thumb margin10 img-thumbnail"></img>
  <article><p>{post.articleText}</p></article>
+ <p>Total comments {comments.length}</p>
  <a className="btn btn-blog pull-right marginBottom10" href={post.readMoreUrl}>READ MORE</a>
  </div>
  <div>

client/src/sagas/api.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const BaseUrl = 'http://localhost:5005/api';
+const BaseUrl = 'http://localhost:5002/api';
 const AuthUrl = 'http://localhost:5000';
 
 

client/src/utils/permissionManager.js

@@ -1,4 +1,17 @@
+const getElement = (resource, userContext) => {
+ return userContext.resources
+ && userContext.resources.length > 0
+ && userContext.resources.find(element => element.name === resource);
+}
+
 export const checkPermission = (resource, userContext) => {
  console.log('checkPermission', resource, userContext.resources);
- return userContext.isAuthenticated && userContext.resources.includes(resource);
+ const element = getElement(resource, userContext);
+ return userContext.isAuthenticated && element != null && element.isAllowed;
+}
+
+export const checkIsDisabled = (resource, userContext) => {
+ console.log('isDisabled', resource, userContext.resources);
+ const element = getElement(resource, userContext);
+ return userContext.isAuthenticated && element != null && element.isDisabled;
 }

server/AuthWebApplication/AuthWebApplication/AuthWebApplication.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
  <PropertyGroup>
- <TargetFramework>netcoreapp3.1</TargetFramework>
+ <TargetFramework>net5.0</TargetFramework>
  <UserSecretsId>6b6ddae3-064a-423b-b950-8a4e0b0cb4cf</UserSecretsId>
  <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
  </PropertyGroup>

server/AuthWebApplication/AuthWebApplication/Models/ViewModels/ApplicationPermissionViewModel.cs

@@ -16,6 +16,7 @@ public ApplicationPermissionViewModel(ApplicationPermission permission)
  this.RoleName = permission.Role.Name;
  this.ResourceName = permission.Resource.Name;
  this.IsAllowed = permission.IsAllowed.ToString();
+ this.IsDisabled = permission.IsDisabled.ToString();
  }
 
  public string Id { get; set; }
@@ -29,5 +30,7 @@ public ApplicationPermissionViewModel(ApplicationPermission permission)
  public string ResourceName { get; set; }
 
  public string IsAllowed { get; set; }
+
+ public string IsDisabled { get; set; }
  }
 }

server/AuthWebApplication/AuthWebApplication/Utilities/Tokens.cs

@@ -21,26 +21,28 @@ public static async Task<object> GenerateJwt(ClaimsIdentity identity, IJwtFactor
  string id = identity.Claims.Single(c => c.Type == "id").Value;
  var name = user.FirstName + " " + user.LastName;
  string token = await jwtFactory.GenerateEncodedToken(user.UserName, identity);
- List<string> resources = new List<string>();
- if (roles!=null)
+
+ List<object> resources = new List<object>();
+ if (roles != null)
  {
  var roleIds = roles.Select(x => (string)x.Id).ToList();
- var permissions = db.Permissions.Include(x => x.Resource).Where(x => roleIds.Contains(x.RoleId) && x.IsAllowed).Select(x => new { name = x.Resource.Name, isAllowed = x.IsAllowed, isDisabled = x.IsDisabled })
+ resources = db.Permissions.Include(x => x.Resource).Where(x => roleIds.Contains(x.RoleId) && x.IsAllowed).Select(x => (dynamic) new { name = x.Resource.Name, isAllowed = x.IsAllowed, isDisabled = x.IsDisabled })
  .ToList();
- resources = permissions.Select(x => x.name).ToList();
+ //resources = permissions.Select(x => x.name).ToList();
  }
- 
- var response = new
+
+ dynamic response = new
  {
  id = id,
  name = name,
  userName = user.UserName,
- resources = resources,
  roles = roles,
  access_token = token,
  expires_in = (int)jwtOptions.ValidFor.TotalSeconds,
- token_type = "bearer"
+ token_type = "bearer",
+ resources = resources
  };
+
  return response;
  }
  }