we have a react.js application that uses react-router v.6 we receive roles and permissions from back-end when user logs in,we want to toggle menu items and filter routes based on role/permission.

how should front-end and back-end communicate about access to route and menu items? my solution for private routes so far:

import { Navigate } from 'react-router-dom';

import { userInfoStore } from './auth/login/user-store';

export function PrivateRoute({ children, roles }) {
  const info = userInfoStore((state) => state.info);

  if (!info.role) {
    return <Navigate to="/auth/login" />;
  }
  if (info.role && roles.indexOf(info.role) === -1) {
    return <Navigate to="/" />;
  }
  return children;
}