Создание временных URL-адресов в одностраничных приложениях

В моем одностраничном приложении, основанном на реакции, моя страница разделена на две панели.

Левая панель: панель фильтров.

Правая панель: сетка (таблица, содержащая данные, которые проходят через применяемые фильтры)

В общем, у меня есть приложение, которое выглядит очень похоже на amazon.com. По умолчанию, когда пользователь удаляет конечную точку приложения (/) в браузере, я получаю последние 7 дней с сервера и показываю его внутри сетки.

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

Теперь, когда кто-то нажимает кнопку поиска на панели фильтров, я хочу отображать выбранные фильтры в параметре запроса URL-адреса, потому что это поможет мне поделиться этими URL-адресами с другими пользователями моего веб-сайта, чтобы они могли видеть фильтры Я применил и увидел данные внутри сетки, соответствующие этим фильтрам.

Проблема здесь в том, что если при нажатии кнопки поиска, я использую http get с параметрами запроса, я закончу приложение для приложения из-за ограничения, налагаемого на длину URL-адресов разными браузерами.

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

Возможное решение: Учитывая тот факт, что мы не можем напрямую добавлять простые строки в параметр запроса из-за ограничения длины URL-адресов из разных браузеров (Примечание. Спецификация не ограничивает длину запроса HTTP Get, а отличается браузеры реализуют свои собственные ограничения), мы можем использовать что-то вроде дайджеста сообщений или хэша (конвертировать ввод произвольной длины в вывод фиксированной длины) и сохранять его в БД для сервера, чтобы понять запрос и обслуживать контент. Это просто мысль, я не уверен, является ли это идеальным решением этой проблемы.

Поведение других сильно используемых веб-сайтов:

  • amazon.com, newegg.com → использует хешированные URL-адреса.
  • kayak.com → , поскольку у них есть очень четко определенные ключевые слова, они используют короткие формы, такие как IN for INDIA, BLR для Bangalore и т.д. и объединяют это с логикой отрицания для дальнейшей оптимизации максимальной длины URL-адреса. Не но это будет идеально ломаться после большого выбора фильтров.
  • flipkart.com → присоединяет строки непосредственно к параметрам запроса и разрыву после того, как предел нарушен. подтвердил это.

Ответ 1

В ответ на @cauchy answer нам нужно провести различие между хэшированием и шифрованием.

хэширования

Хеши по необходимости необратимы. Чтобы сопоставить хэш с конкретной комбинацией фильтров, вам нужно либо

  • хешировать каждую перестановку фильтров на сервере для каждого запроса, чтобы попытаться совместить запрошенный хеш (интенсивно вычислить) или
  • сохранить карту хэша для фильтрации комбинации на сервере (интенсивная память).

В подавляющем большинстве случаев вариант 1 будет слишком медленным. В зависимости от количества фильтров и опций, вариант B может потребовать значительную карту, но это все равно ваш лучший вариант.

Шифрование

В этой схеме сервер отправит свой открытый ключ клиенту, а затем клиент сможет использовать его для шифрования своих параметров фильтра. Затем сервер будет расшифровывать зашифрованные данные с помощью своего закрытого ключа. Это хорошо, но ваши зашифрованные данные не будут фиксированной длиной. Таким образом, по мере выбора большего количества параметров вы сталкиваетесь с той же проблемой неопределенной длины параметра.

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

Как мы должны обрабатывать постоянные и временные ссылки?

Вы упомянули в свой комментарий выше

Если мы используем какое-то постоянное хранилище для сохранения сопоставления между этим хешем и фактическими фильтрами, мы в идеале хотим отделить долгоживущие "постоянные ссылки" от недолговечных эфемерных URL-адресов и использовать это понимание для эффективного истечения краткосрочных хэши.

Вероятно, у вас есть служба на сервере, которая обрабатывает все фильтры, которые вы поддерживаете в своем приложении. Трюк здесь позволяет этому сервису также управлять хэшмапом. По мере добавления/удаления дополнительных фильтров и опций служба должна будет повторно использовать каждую перестановку фильтров.

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

Когда мы обновляем хэши в нашей БД?

Есть много вариантов, но я обычно предпочитаю время сборки. Если вы используете решение CI, такое как Jenkins, Travis, AWS CodePipeline и т.д., Вы можете добавить шаг сборки для обновления своей БД. В принципе, вы собираетесь...

  • Сохранять постоянную запись всех существующих поддерживаемых фильтров.
  • В процессе сборки проверьте, есть ли новые фильтры. Если так...
    • Добавьте эти фильтры в запись с шага 1.
    • Хеш все новые перестановки фильтров (только те, которые включают ваши новые фильтры) и сохраняют их в хэш-БД
  • Проверьте, удалены ли какие-либо фильтры. Если так...
    • Удалите эти фильтры из записи с шага 1.
    • Найти все хеши для перестановок, которые включают эти фильтры, и...
      • удалите эти хэши из БД (слабые постоянные ссылки) или
      • Направьте этот хэш на разумный альтернативный хеш в БД (сильные постоянные ссылки)

Ответ 2

Давайте проанализируем вашу проблему и возможное решение. Проблема. Вам нужен URL-адрес, который содержит информацию о применяемом фильтре, чтобы при совместном использовании этого URL-адреса пользователь не попадал на произвольную страницу.

Решения:

1) Добавить фильтр, применяемый с URL. Для этого вам необходимо сократить ключ типа фильтра и значение фильтра, чтобы длина URL-адреса не превышала значения для каждого фильтра.

Недостаток: это не самое надежное решение, так как количество увеличения длины URL-адреса фильтра не должно увеличивать никакой другой опции.

2) Добавьте уникальный ключ применяемого фильтра (хэш) с URL-адресом. Для этого вам нужно будет сделать некоторые изменения на сервере и клиенте. На стороне клиента вам понадобится алгоритм кодирования, который преобразует фильтр, применяемый к уникальному хешу. На стороне сервера вам понадобится алгоритм декодирования, который преобразует уникальный хеш для фильтрации. SO теперь клиент всякий раз, когда URL-адрес подобен этому, вы можете сделать POST-вызов api, который принимает этот хеш, дает вам массив применяемого фильтра или на стороне клиента, только ставит логику для преобразования этого хэша. Сделайте все это в componentWillMount, чтобы избежать побочных эффектов.

Я думаю, что 2-е решение является масштабируемым и эффективным практически во всех случаях.