Один из способов ограничить доступ к страницам в приложении SPA на React - это использовать механизм роутинга и проверять разрешения пользователя перед отображением страницы.
В вашем случае, для страницы редактирования профиля, вы можете сохранить информацию о том, является ли текущий пользователь владельцем профиля (например, в состоянии компонента или в хранилище Redux). В момент загрузки страницы вы проверяете это значение и принимаете решение о том, отобразить страницу или показать сообщение об ошибке.
Примерно так может выглядеть код без использования SSR:
```
import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';
const ProfileEditPage = () => {
const [canEdit, setCanEdit] = useState(false);
useEffect(() => {
// Здесь вы делаете запрос на сервер, чтобы проверить доступ пользователя
// Например, используя вашу переменную CanEdit
const checkEditingPermission = async () => {
const response = await fetch('/api/check-editing-permission');
const data = await response.json();
setCanEdit(data.canEdit);
};
checkEditingPermission();
}, []);
if (!canEdit) {
return <Redirect to="/error" />;
}
return <div>Страница редактирования профиля</div>;
};
export default ProfileEditPage;
```
Здесь мы используем хук `useEffect`, чтобы выполнить проверку разрешения на редактирование профиля при загрузке страницы. Если разрешение отсутствует, мы перенаправляем пользователя на страницу ошибки с помощью компонента `Redirect` из пакета react-router-dom.
Это простой пример, но конкретная реализация будет зависеть от вашей архитектуры приложения и способа работы с авторизацией и разрешениями на сервере. Вы можете использовать любую библиотеку для роутинга или управления состоянием в React, чтобы достичь подобного функционала.