Как избежать доступа пользователя без токена к защищённой странице

Что проверяют

Понимаете ли вы, что проверка на клиенте это удобство, а не защита. Интервьюеру важно услышать, где на самом деле проходит граница доступа. Следом обычно спрашивают, где хранить токен и что делать, когда он истёк.

Как отвечать

Начните с главного: браузер полностью под контролем пользователя, любой код в нём обходится через DevTools. Поэтому защищаются данные, а страница лишь не показывает лишнего.

• сервер: каждый запрос к API проверяет токен (подпись JWT, срок exp, права) и отвечает 401 или 403. Без этого клиентская проверка бессмысленна;
• гард маршрута: в React Router v6 и новее это компонент-обёртка, который возвращает <Navigate to="/login" replace /> или <Outlet />, либо проверка в loader с redirect. Во Vue это router.beforeEach, в Angular функциональный гард CanActivateFn;
• серверный рендер: в Next.js проверку делают до рендера, в серверном компоненте или в middleware (в Next 16 файл называется proxy.ts), тогда защищённая разметка вообще не уходит в браузер;
• хранение: токен в localStorage доступен любому скрипту, и XSS его украдёт. Надёжнее cookie с флагами HttpOnly, Secure и SameSite, но тогда нужна защита от CSRF;
• истечение: короткий access-токен плюс refresh-токен. Перехватчик в axios или обёртке над fetch ловит 401, один раз обновляет токен и повторяет запрос, а при неудаче отправляет на логин.

Не забудьте про интерфейс: пока проверяется сессия, рендерится лоадер, а не мигающий на долю секунды контент защищённой страницы.

Где спотыкаются

Считают, что редирект на /login в браузере и есть защита. Если API отдаёт данные без проверки токена, их можно забрать обычным curl.

Проверяют только наличие строки в localStorage, не глядя на срок. Просроченный токен формально есть, страница открывается, а все запросы падают с 401.

Приводят код на Redirect и render из React Router v5. В v6 этих API нет, и интервьюер сразу видит, что опыт давний.