react with casl code example
Example: casl react
import { AbilityBuilder } from '@casl/ability';
import React, { useState, useContext } from 'react';
import { AbilityContext } from './Can';
function updateAbility(ability, user) {
const { can, rules } = new AbilityBuilder();
if (user.role === 'admin') {
can('manage', 'all');
} else {
can('read', 'all');
}
ability.update(rules);
}
export default () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const ability = useContext(AbilityContext);
const login = () => {
const params = {
method: 'POST',
body: JSON.stringify({ username, password })
};
return fetch('path/to/api/login', params)
.then(response => response.json())
.then(({ user }) => updateAbility(ability, user));
};
return (
<form>
{}
<button onClick={login}>Login</button>
</form>
);
};