Как сохранить токен аутентификации в приложении Angular

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

Я реализую слегка настроенную версию OAuth 2.0, используя грант пароля владельца ресурса. Приложение Angular предоставляет форму для ввода пользователем имени пользователя и пароля. Эти учетные данные затем отправляются в API в обмен на токен доступа, который затем должен быть отправлен в виде заголовка (авторизация: Bearer% Token%) для всех исходящих запросов в API, чтобы он мог разрешать запросы другим маршрутам.

Я новичок в области Angular, но рабочий процесс, который я хотел бы реализовать в отношении обработки этих токенов, суммируется следующим образом.

1) Клиент делает запрос API, предоставляя ему учетные данные пользователя.

2) Если этот запрос успешный, токен хранится где-нибудь (где вопрос)

3) Перехватить HTTP-запросы. Если установлен токен, передайте его как заголовок в API

4) Токен уничтожается, когда браузер/вкладка закрыта.

Я знаю, что Angular предлагает $window.sessionStorage, который, как мне кажется, я ищу, но меня беспокоит возможность не работать во всех браузерах в соответствии с различными ресурсами Я прочел. Это приложение корпоративного уровня и должно быть совместимо с широким спектром браузеров (IE, Chrome, Firefox). Могу ли я безопасно использовать это с уверенностью, что он будет стабильным?

Альтернативы, из того, что я понимаю, являются либо $window.localStorage, либо cookie ($ cookies, $cookieStore). Это не было бы идеальным решением для меня, поскольку я не хочу, чтобы эти данные сохранялись, но если это более надежно, я должен пожертвовать эффективностью для совместимости. Я также думал, что можно просто установить его как значение в $rootScope и ссылаться на него таким образом, но я не уверен, что это возможно.

Я надеюсь, что все имело смысл. Любая помощь/предложения были бы весьма признательны. Спасибо!

Ответы

Ответ 1

Если вы ищете что-то, что определенно не сохранится, я бы просто сохранил токен в памяти и не полагался на браузер для хранения. Однако сохранение внутри rootScope не было бы лучшей практикой.

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

Angular Сервисы являются одноточечными, поэтому ваш "серверный сервис" будет глобальным экземпляром, к которому можно получить доступ, используя обычную инъекцию зависимостей.

Ответ 2

$window.sessionStorage - это путь, если вы не нацеливаете очень старые браузеры.

Согласно www.w3schools.com sessionStorage поддерживается в IE 8.0, Chrome 4.0, Firefox 3.5 и Safari 4.0.