Хранение учетных данных в Angular SPA

Question

У меня есть служба аутентификации в моем Angular SPA, которая должна хранить токен JWT, чтобы каждый раз он мог отправлять его обратно на сервер в заголовках (API требует, чтобы он был включен в его собственный заголовок под названием Authentication-Token)

В настоящий момент моя служба авторизации просто хранит его в памяти, но, очевидно, для этого требуется новый логин, если страница обновлена ​​или они открывают страницу на новой вкладке, поэтому мне нужно сохранить их детали немного более постоянным. Насколько я вижу, у меня есть несколько вариантов, но ни один из них не идеален.

A) - Хранить их в файле cookie. Но тогда токен будет отправляться дважды с каждым запросом вместе с другими данными, такими как профиль пользователя данные, которые необходимо сохранить вместе с ним.

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

с) Session Storage - Как и выше, но не работает, если пользователь открывает новая вкладка

d) Считайте детали, отправленные с сервера при каждой загрузке страницы, и используйте ng-init, чтобы спрятать их в памяти до того, как все вызовы будут сделаны в API. Это было бы хорошо, но мой сайт в настоящее время является обычным HTML-сайтом, который вызывает API, это не сайт PHP/Node/.net, поэтому мне нужно будет представить материал на стороне сервера, чтобы получить токен.

Итак, есть ли у кого-нибудь лучшие идеи? Или любой способ обойти любую из этих проблем?

Answer 1

Обычно я использую LocalStorage или SessionStorage (в зависимости от требований). Предел составляет 10 МБ (объединенный локальный & сеанс) за источник, поэтому вы должны иметь возможность управлять этим в своем приложении или определять другой способ убедиться, что пространство учетных данных защищено.