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

Здесь на сцену выходят файлы cookie. Говоря простым языком, HTTP-файлы cookie - это способ хранения данных, которые затем могут быть отправлены на сервер. Пример в видео Тома Скотта, cookie может использоваться для настройки темного / светлого режима. Ваш браузер установит файл cookie, содержащий предпочтение о том, какую тему использовать, и сервер вернет правильную тему. Однако в этом руководстве мы будем использовать файлы cookie для хранения, а не для связи с сервером.

Существует пакет npm, который мы можем использовать под названием js-cookie (или, в качестве альтернативы, вы можете использовать тег скрипта, чтобы импортировать его из jsDelivr CDN. Используйте эту ссылку для получения дополнительной информации о том, как его установить.)

Теперь приступим к реальной реализации. Я собираюсь использовать для этого React (библиотеку пользовательского интерфейса для JS), но вы можете использовать все, что связано с JavaScript. Из моей последней записи я использовал Firebase Authentication для получения информации для входа. Я собираюсь забрать код оттуда (хотя вам не нужно его читать, чтобы понять, что происходит). Чтобы импортировать js-cookie после его установки, поместите эту строку кода в начало файла JavaScript:

import Cookies from ‘js-cookie’

Теперь это код для установки файла cookie после того, как мы получим информацию для входа в систему: (Login.js)

Переменная res - это ответ от Firebase Authentication относительно данных учетной записи пользователя GitHub (я реализовал кнопку Войти через Github). Мы устанавливаем cookie с Cookies.set(). Первый аргумент, который принимает функция, - это имя файла cookie. В данном случае я установил userInfo. Второй аргумент - это объект (похожий на JSON). Это содержимое файла cookie. Он не обязательно должен соответствовать этой структуре и может содержать что угодно, если его размер не превышает 4 килобайт. В соответствии с этим сообщением о переполнении стека в вашем домене может быть до 50 файлов cookie. Третий аргумент является необязательным и представляет собой еще один объект, который определяет, как долго хранится файл cookie (здесь я поставил его на 29 дней).

Теперь, когда пользователь входит в систему, мы сохранили его учетные данные в файле cookie!

Получить этот файл cookie также просто. Теперь, когда мы сохранили учетные данные для входа, вы можете перенаправить пользователя на главную страницу. Если вы используете простой HTML + CSS + JavaScript, вы обычно можете установить window.location.href на страницу, на которую должен перейти ваш пользователь. Это отличное руководство, которое поможет вам настроить сервер для размещения ваших страниц. Вы также можете пропустить, так как следующий раздел будет посвящен перенаправлению с помощью React.

Однако, если вы используете React, вы должны использовать React Rout для выполнения этой задачи.

Чтобы установить веб-версию React Router, запустите npm i react-router-dom в каталоге вашего проекта. (Примечание: не устанавливайте пакет с именем react-router, так как он установит модуль для React Native, способа написания мобильных приложений с помощью React.) Отлично! Теперь у вас установлен React Router!

Теперь вы должны начать кодирование в файле, содержащем функцию ReactDOM.render().

Позвольте мне сломать это. Наверху у нас есть импорт React Router, который в основном импортирует то, что нам нужно. Однако import yourComponent from ‘RELATIVE_PATH_TO_YOUR_COMPONENT’; более важен.

С помощью React Router, вместо того, чтобы указывать на новые файлы HTML, мы можем загружать компоненты при перенаправлении на определенную конечную точку. Вы можете переименовать yourComponent как хотите. RELATIVE_PATH_TO_YOUR_COMPONENT - это путь к вашему компоненту из файла JavaScript, который отображает наш код React.

Теперь давайте посмотрим на этот блок кода:

<Router>
    <Switch>
        <Route path="/PAGE_NAME" component={yourComponent}/>
    </Switch>
</Router>

В основном это настраивает конечные точки для нашего веб-приложения. <Router> просто сообщает React: «Это код, в котором мы настраиваем конечные точки URL». <Switch> - это компонент, который выбирает первую конечную точку, если все они совпадают. Например, если у нас есть конечная точка для /profile и /:variable (последнее предназначено для получения параметров из URL-адресов конечных точек, таких как получение «ShubhamPatilsd» в github.com/ShubhamPatilsd), <Switch> будет использовать только первую конечную точку или в в данном случае /profile.

Компонент <Route> здесь наиболее важен. Это то, что определяет конечные точки для нашего приложения React. В этом примере вы можете видеть, что я установил path на /PAGE_NAME, и он отображает yourComponent, когда пользователь пытается получить доступ к этой странице. Измените часть PAGE_NAME на нужную конечную точку. Например, если вы хотите /cool, вы должны изменить его на /cool вместо /PAGE_NAME.

React Router предлагает множество вещей, и я предлагаю прочитать их документацию, чтобы получить больше информации.

Теперь, когда мы настроили инфраструктуру для обработки наших ссылок, мы можем поговорить о том, как получить файлы cookie.

Чтобы импортировать js-cookie, снова введите import Cookies from ‘js-cookie’ в верхней части файла JavaScript. Затем, чтобы получить данные, используйте следующий код:

JSON.parse(Cookies.get('userInfo'));

Вам понадобится JSON.parse, потому что js-cookie не возвращает автоматически данные cookie в формате JSON, а вместо этого возвращает их в виде строки. Это проблема, потому что, если остальная часть вашего кода попытается получить доступ к необработанной строке, такой как ее JSON, это приведет к ошибкам.

Если вы используете простой HTML, CSS и JavaScript, это конец руководства! Надеюсь, у вас работают куки! Если нет, посмотрите это видео, и если оно по-прежнему не работает, вы можете написать комментарий, и я могу вам помочь.

Однако, если вы используете React, есть еще несколько дополнительных шагов, которые могут принести вам пользу в долгосрочной перспективе.

Сначала импортируйте компонент <Redirect> из библиотеки React Router, набрав его в верхней части файла JavaScript:

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

Затем реализуйте оператор if-else, чтобы проверить, вошел ли пользователь в систему следующим образом:

Для условия в первом блоке if он проверяет, является ли файл cookie с именем userInfo нулевым или нет. Если это так, мы перенаправляем пользователя на определенную конечную точку с именем /login. (Примечание: вы можете перенаправить пользователя на любую конечную точку, которую хотите, просто не забудьте настроить ее!). Однако, если cookie не является нулевым, мы сохраняем проанализированный JSON cookie внутри переменной с именем userData.

И это все! Теперь вы можете получить доступ к этой userData переменной как к объекту JSON!

Спасибо, что прочитали мою вторую статью о Medium! Если у вас есть предложения, дайте мне знать в личном комментарии!