using with react (vite)

[meodemsao]

I have problem when using node-casbin with react

import { newModel, Enforcer, newEnforcer } from 'casbin'
import { AuthActionVerb, AuthPossession, CustomAuthActionVerb } from 'constants/enum/auth'
import { ExecutionContext } from 'graphql/execution/execute'

import storage from './storage'

export type Permission = {
  resource: string
  action: AuthActionVerb | CustomAuthActionVerb
  possession?: AuthPossession
}

export const loadModel = () => {
  // rbac model
  const model = `
	[request_definition]
	r = sub, obj, act

	[policy_definition]
	p = sub, obj, act

	[role_definition]
	g = _, _

	[policy_effect]
	e = some(where (p.eft == allow))

	[matchers]
	m = g(r.sub, p.sub) && r.obj == p.obj && r.act == p.act`

  const m = newModel()
  m.loadModelFromText(model)
  return m
}

export const loadPermissions = async (enforcer: Enforcer) => {
  const permissions = storage.getPermissions()
  await Promise.all([
    ...permissions.map((permission: any) => {
      return enforcer.addPolicy(permission[0], permission[1], permission[2])
    }),
  ])
}

export const initEnforcer = async (): Promise<Enforcer | null> => {
  const m = loadModel()

  const enforcer = await newEnforcer(m)

  await loadPermissions(enforcer)

  return enforcer
}

[casbin-bot]

@nodece @Zxilly @Shivansh-yadav13

[hsluoyz]

@meodemsao did you try: https://github.com/casbin-js/react-authz ?

[Shivansh-yadav13]

@meodemsao you can try ReactAuthz, Casbin-core, Casbin.js, node-casbin is not really for frontend javascript

[nodece]

This looks like a dependency issue, @Shivansh-yadav13 Could you work on this?

[Shivansh-yadav13]

This looks like a dependency issue, @Shivansh-yadav13 Could you work on this?

Ohk, I'll look into it.

[meodemsao]

@meodemsao did you try: https://github.com/casbin-js/react-authz ?

i don't know how to use this, don't have any doc

[meodemsao]

@meodemsao you can try ReactAuthz, Casbin-core, Casbin.js, node-casbin is not really for frontend javascript

i will try https://github.com/casbin/casbin-core

node-casbin work if i use with webpack, i have issue with vite

[Shivansh-yadav13]

@nodece @meodemsao I feel the code is running in browser, that's why we are getting this error, do you think there could be a bug or dependency error?

[nodece]

@nodece @meodemsao I feel the code is running in browser, that's why we are getting this error, do you think there could be a bug or dependency error?

Looks like a dependency error, could you testing the the https://vitejs.dev/guide/ ?

[meodemsao]

@Shivansh-yadav13 @nodece i used casbin-core and work well

[nodece]

Because I use the minimatch instead of the picomatch.

[meodemsao]

Because I use the minimatch instead of the picomatch.

thanks u

[Shivansh-yadav13]

Because I use the minimatch instead of the picomatch.

@nodece should we do that in node-casbin also?

[nodece]

@Shivansh-yadav13 I think we should use the minimatch instead of the picomatch, but some expressions cannot run on the minimatch, I checked the expressions, and I can accept that these expressions don't work.

[ItsKDaniel]

This does not work with Vue + Vite as well. I am getting the same error when I tried using vue-authz, or casbin.js.

The issue is due to polyfills for Node not being available in the main casbin npm package (node-casbin). Since casbin.js and the wrappers like react-authz, vue-authz are browser targeting libraries, we would require node polyfills to be available for the libraries to work.

[hsluoyz]

@ItsKDaniel casbin.js and the wrappers like react-authz are for browser only. It's not for Node.js . If you have other questions, please create new issue. Closed here.