Casbin giving errors of can't find 'fs'

I am having issues with casbin and its clearly from my lack of experience with using it. I am using strapi v4, in my authProvider I get the users role and store it along with the other useful information. I am now trying to use casbin to load a different dashboard based on who is logged in either admin or user but I keep getting an error that it can't find 'fs'. I have been following the tutorial on the documents page.
K
kapa.ai158d ago
Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is likely due to the fact that casbin requires certain Node.js modules like fs which are not available in the browser environment. To resolve this, you need to configure polyfills for vite to work in a browser environment. First, install the required packages:
npm install -D rollup-plugin-polyfill-node @esbuild-plugins/node-modules-polyfill @esbuild-plugins/node-globals-polyfill
npm install -D rollup-plugin-polyfill-node @esbuild-plugins/node-modules-polyfill @esbuild-plugins/node-globals-polyfill
Then, add the following to your vite.config.ts file:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-polyfill-node";

export default defineConfig({
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis",
},
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
process: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
build: {
rollupOptions: {
plugins: [rollupNodePolyFill()],
},
},
});
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-polyfill-node";

export default defineConfig({
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis",
},
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
process: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
build: {
rollupOptions: {
plugins: [rollupNodePolyFill()],
},
},
});
This configuration will provide browser fallbacks for the Node.js modules that casbin depends on. Without these overrides, casbin versions >5 are known to throw errors (source (https://refine.dev/blog/refine-pixels-6/)). Once you've done this, you should be able to use casbin in your accessControlProvider to enforce role-based access control. Here's an example of how you might do this:
import { newEnforcer } from "casbin";
import { CanParams, CanReturnType } from "@refinedev/core";
import { adapter, model } from "../casbin/accessControl";
import { authProvider } from "./authProvider";
export const accessControlProvider = {
can: async ({ resource, action }: CanParams): Promise<CanReturnType> => {
const role = await authProvider.getPermissions?.();
const enforcer = await newEnforcer(model, adapter);
const can = await enforcer.enforce(role, resource, action);
return Promise.resolve({
can,
});
},
};
import { newEnforcer } from "casbin";
import { CanParams, CanReturnType } from "@refinedev/core";
import { adapter, model } from "../casbin/accessControl";
import { authProvider } from "./authProvider";
export const accessControlProvider = {
can: async ({ resource, action }: CanParams): Promise<CanReturnType> => {
const role = await authProvider.getPermissions?.();
const enforcer = await newEnforcer(model, adapter);
const can = await enforcer.enforce(role, resource, action);
return Promise.resolve({
can,
});
},
};
In this example, the can method fetches the user's role from the authProvider and uses casbin to enforce access control based on that role (source (https://refine.dev/blog/refine-pixels-6/)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai158d ago
<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below
M
multiple-amethyst155d ago
Hello @erekyu are you following this page? https://refine.dev/docs/advanced-tutorials/access-control/#adding-policy-and-model If you can provide more information, we could help you. You can also provide a minimal-reproducible example.
A
automatic-azure154d ago
the article the bot mentioned has the parts that are missing from the article you linked (the one you linked was the one I was following). It is really out dated and the github has the missing packages and other things but the you really gotta dig to find whats missing that makes the demo work. the other article has the missing packages and setup
More Posts
Edit page select dropdown show current valueHow can you get the edit page select dropdown show current value instead of select?Invalid Project Directory providedI've been trying to update refine project and I keep getting the error invalid project directory proget user role on authProviderI have authProvider with supabase client how can I get user's role. I have called the function consosetFilter with useDataGrid on mountIn the example for filtering in useDataGrid docs, handleFilter is called onChange. But how do I setFChanging form data with Material DesignCan I see an example of a component that uses the Material UI create component to change how the forgetToPath output undefinedI defined my component like this way: import { useGetToPath, useGo } from "@refinedev/core"; import Add additional parameters to useForm hook with Mantine UII'm trying to add additional data to a useForm hook when the user creates a new post that is not relI want to use useForm even though I don't have an ID for a user-profile editHello refine community! I want to build a UserProfile Form with the ease of the useForm hook Refine After execution getOne in provider, useForm not update the dataHello everyone, i create a form and i used the hook useUpdate, after the mutation finish, the list sHow to add autocomplete attribute in inputs on login auth page?TypeError: Cannot read properties of null (reading 'firstChild')Hi, I am facing this error whenever I hit refresh button in the browser. When I open dashboard screeShow specific field of relation table in Show/:id of a tableHi! I have a problem like this I have 2 table with relation one to many: products and categories. OnuseModalForm but use it to send GET request with query parameter instead of default action.instead of default action edit, create and clone of useModalForm. I want to submit the form with GETForms with custom componentsHello! I'm most likely being dumb but I'm currently working on making a create form based off of wha