casl integration

Author: gsaini

package-lock.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.0.0-beta.44",
+    "@casl/ability": "^4.1.4",
+    "@casl/react": "^2.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

package.json

@@ -5,8 +5,12 @@ import './App.css';
 import {
   Link
 } from "react-router-dom";
-
+import { Can } from './rules/Can';
+import { Article } from "./rules/entities";
 function App() {
+
+  const article = new Article({ published: true });
+
   return (
     <div className="App">
       <header className="App-header">
@@ -24,8 +28,9 @@ function App() {
         </a>
         <Link to="/books">Books</Link>
         <Link to="/todos">Todos</Link>
-
-        <ExchangeRates />
+        <Can I="read" a={article}>
+        { () => <ExchangeRates /> }
+        </Can>
       </header>
     </div>
   );

src/App.tsx

@@ -0,0 +1,9 @@
+import { Ability } from "@casl/ability";
+
+export default new Ability([
+  {
+    action: "update",
+    subject: "Author",
+    conditions: { isShowAuthor: true }
+  }
+]);

src/components/Books/ability.ts

@@ -0,0 +1,6 @@
+import { defineAbility } from '@casl/ability';
+
+export default defineAbility((can, cannot) => {
+  can('read', 'GS');
+  cannot('delete', 'User');
+});

src/components/Books/defineAbility.ts

@@ -1,6 +1,9 @@
 import React, { useRef } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
 import { GET_BOOKS, ADD_BOOK } from './gql';
+import { Can } from '@casl/react';
+import ability from './ability';
+import { Author } from '../../rules/entities';
 
 export default function Books() {
   const bookTitle = useRef(null);
@@ -13,7 +16,7 @@ export default function Books() {
 
       cache.writeQuery({
         query: GET_BOOKS,
-        data: { 
+        data: {
           books: [...books, addBook]
         }
       });
@@ -25,13 +28,16 @@ export default function Books() {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    
-    addBook({ variables: { title: event.target.title.value, author: event.target.author.value } });
+    const target = event.target;
 
-    event.target.title = '';
-    event.target.author = '';
+    addBook({ variables: { title: target.title.value, author: target.author.value } });
+
+    target.title.value = '';
+    target.author.value = '';
   }
 
+  const author = new Author({ isShowAuthor: data.books.length === 2 });
+
   return (
     <section>
       <ul>
@@ -43,12 +49,17 @@ export default function Books() {
           ))
         }
       </ul>
-      <form onSubmit={(e) => handleSubmit(e)} style={{ display:'flex', flexDirection: 'row' }}>
+      <form onSubmit={(e) => handleSubmit(e)} style={{ display: 'flex', flexDirection: 'row' }}>
         <label htmlFor="title">Title:</label>
         <input type="text" id="title" name="title" ref={bookTitle} />
-        <label htmlFor="author">Book:</label>
-        <input type="text" id="author" name="author" ref={bookAuthor}/>
-        <button type="submit">Submit</button>
+
+          <label htmlFor="author">Book:</label>
+          <input type="text" id="author" name="author" ref={bookAuthor} />
+
+        <Can I="update" a={author} ability={ability}>
+          {() => <button type="submit">Submit</button>}
+        </Can>
+
       </form>
     </section>
   );

src/components/Books/index.tsx

@@ -7,6 +7,8 @@ import * as serviceWorker from './serviceWorker';
 import client from './apollo/client';
 import Books from './components/Books';
 import Todos from './components/Todos';
+import { AbilityContext } from './rules/Can'
+import ability from './rules/abilityBuilder'
 
 import {
   BrowserRouter as Router,
@@ -16,22 +18,23 @@ import {
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <React.StrictMode>
-      <Router>
-      <Switch>
-        
-        <Route path="/books">
-          <Books />
-        </Route>
-        <Route path="/todos">
-          <Todos />
-        </Route>
-        <Route path="/">
-          <App />
-        </Route>
-      </Switch>
-      </Router>
-    </React.StrictMode>
+    <AbilityContext.Provider value={ability}>
+      <React.StrictMode>
+        <Router>
+          <Switch>
+            <Route path="/books">
+              <Books />
+            </Route>
+            <Route path="/todos">
+              <Todos />
+            </Route>
+            <Route path="/">
+              <App />
+            </Route>
+          </Switch>
+        </Router>
+      </React.StrictMode>
+      </AbilityContext.Provider>
   </ApolloProvider>,
   document.getElementById('root')
 );

src/index.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { createContextualCan } from '@casl/react';
+import { AnyAbility, PureAbility } from "@casl/ability";
+
+export const AbilityContext = createContext<AnyAbility>({} as PureAbility);
+export const Can = createContextualCan(AbilityContext.Consumer);

src/rules/Can.ts

@@ -0,0 +1,9 @@
+import { Ability } from "@casl/ability";
+
+export default new Ability([
+  {
+    action: "read",
+    subject: "Article",
+    conditions: { published: false }
+  }
+]);

src/rules/abilityBuilder.ts

@@ -0,0 +1,8 @@
+class Entity {
+  constructor(attrs) {
+    Object.assign(this, attrs);
+  }
+}
+
+export class Article extends Entity {}
+export class Author extends Entity {}