Как защитить роуты?

Question

[Palpebral]

Роутинг:

const guestRoutes = (
        <Routes>
            <Route path="/"        element={<h1>О проекте</h1>} />
            <Route path="/account" element={<h1>Войти</h1>} />
        </Routes>
    );

    const userRoutes = (
        <Routes>
            <Route path="/"               element={<h1>О проекте</h1>} />
            <Route path="/todo-create"    element={<h1>Создать</h1>} />
            <Route path="/todo-update/:id" element={<h1>Редактировать</h1>} />
            <Route path="/todos">
                <Route index      element={<h1>Задачи</h1>} />
                <Route path=":id" element={<h1>Одна Задача</h1>} />
            </Route>
        </Routes>
    );

    return (
        <AppContext.Provider value={{state, login, logout}}>
            <Layout>
                {state.isAuth ? userRoutes : guestRoutes}
            </Layout>
        </AppContext.Provider>
    );

Навигация:

const userNavbar = (
        <ul className="navbar__list">
            <li className="navbar__item">
                <NavbarLink to="/">Главная</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarLink to="/todos">Задачи</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarLink to="/todo-create">Создать</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarButton onClick={() => logout()}>Выйти</NavbarButton>
            </li>
        </ul>
    );

    const guestNavbar = (
        <ul className="navbar__list">
            <li className="navbar__item">
                <NavbarLink to="/todos">Главная</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarLink to="/account">Войти</NavbarLink>
            </li>
        </ul>
    );

    return (
        <nav className="navbar">
            <div className="navbar__body">
                {state.isAuth ? userNavbar : guestNavbar}
            </div>
        </nav>
    );

В зависимости от изменения state.isAuth - изменяется как навигация, так и в целом роутинг, то есть защита есть, но она работает не совсем так, как мне нужно. Если неавторизованный пользователь введет адрес "/todos", то приложение переходит по этому пути, но ничего не показывает Как реализовать функционал, который не будет открывать пути, которые не доступны?

- Я новичок, так что может я как-то накосячил именно в уже имеющемся коде?)
- Ссылки сделаны с помощью NavLink, просто вывел в отдельный UI компонент, как NavbarButton

Answer 1

[Арсений Матыцин]

Проще воспользоваться гуглом и найти рецепт роута. Его суть заключается в оборачивании всех роутов в функцию, которая проверяет либо авторизацию, либо принадлежность к роли. Это то, что по сути уже есть, но не хватает из классического рецепта редиректа, если доступа нет и пути, который охватывает все, что не входит в перечисленные, обозначается он символм «*».

Comments

[Palpebral]

Я решил проблему тем, что добавил еще один роут для 404 ошибки. Возможно, Вы об этом и говорите)