Я создаю приложение для отслеживания привычек и использую Supabase PostgreSQL. Я реализую RLS в таблице привычек, но не могу разобраться в этой проблеме. При нажатии кнопки «Создать привычку» он отправляет информацию в API Supabase, но возвращает ошибку 403 ."new row violates row-level security policy for table \"habit\"
. Я решаю эту проблему уже 3 дня и собираюсь сойти с ума.
Вот мой код:
export default function AddHabit({token}) {
const [color, setColor] = useState('rgba(255, 255, 255, 1)');
let navigate = useNavigate();
const [formData, updateFormData] = useState({
name: "",
streak: 0,
color_hex: color,
dates_completed: [""],
times_per_day: "",
days_goal: "",
user_id: token.user.id
})
const handleChangeEvent = (event) => {
updateFormData((prevFormData) => {
return {
...prevFormData,
[event.target.name]:event.target.value
}
})
//console.info(formData);
}
//console.info(token.user.id);
async function handleSubmit(e) {
e.preventDefault();
try {
const { data, error } = await supabase
.from('habit')
.insert([
{
name: formData.name,
streak: formData.streak,
color_hex: formData.color_hex,
dates_completed: formData.dates_completed,
times_per_day: formData.times_per_day,
days_goal: formData.days_goal,
user_id: formData.user_id
}
]).select('*')
console.info(formData);
if (error) {
console.info("Error found: ", error);
};
console.info(data);
navigate("/home");
} catch (error) {
alert(error);
}
}
return (
<div className = "flex flex-col items-center">
<h1 className = "text-4xl py-8 text-white font-bold">Add a Habit here!</h1>
<div className = "grid grid-cols-2 divide-x-2 divide-zinc-500">
<div className = "flex flex-col items-center space-y-4 pr-16">
<h2>Create</h2>
<div className = "flex flex-col space-y-2">
<input type = "text" name = "name" onChange = {handleChangeEvent} placeholder = "Habit Name?" required className = "input input-bordered input-white "/>
<input type = "number" max = {24} name = "times_per_day" onChange = {handleChangeEvent} placeholder = "Times per day?" required className = "input input-bordered input-white"/>
<input type = "number" max = {1000} name = "days_goal" onChange = {handleChangeEvent} placeholder = "Goal (How many days)?" required className = "input input-bordered input-white"/>
</div>
<ColorPicker id = "color" value = {color} onChange = {setColor} hidePresets = {true} hideControls = {true} hideOpacity = {true} hideInputs = {false} />
</div>
<div className = "flex flex-col items-center space-y-4 p-4">
<h2>Preview</h2>
<HabitTile name = {formData.name} hex = {color} times_per_day = {formData.times_per_day} days_goal = {formData.days_goal}/>
</div>
</div>
<button className = "btn btn-primary" onClick = {handleSubmit} >Add this Habit</button>
</div>
)
}
Определение политики RLS:
🤔 А знаете ли вы, что...
SQL может выполнять соединение данных из нескольких таблиц с помощью операторов UNION и UNION ALL.
Вы должны передавать в метод .insert
объект, а не массив объектов. Также убедитесь, что у вас действует политика выбора, поскольку вы звоните .select('*')
после вставки данных.
const { data, error } = await supabase
.from('habit')
.insert({
name: formData.name,
streak: formData.streak,
color_hex: formData.color_hex,
dates_completed: formData.dates_completed,
times_per_day: formData.times_per_day,
days_goal: formData.days_goal,
user_id: formData.user_id
}).select('*')