Как обрабатывать аутентификацию Token с помощью AngularJS и Restangular?

У меня есть приложение angular, которое использует Restangular и ui.router.state.

Это то, что я сейчас делаю

У меня есть конечная точка/токен, которая принимает имя пользователя/пароль и дает вернуть токен-носитель и некоторую пользовательскую информацию.
При успешном входе я сохраняю userinfo и токен в глобальном var, user.current, и я также устанавливаю заголовки Defaultangular по умолчанию для включения токена-носителя:

Restangular.setDefaultHeaders({Авторизация: "Носитель" + data.access_token});
Когда пользователь хочет получить доступ к маршруту с требуемым атрибутом: Auth = true (установленным в маршрутизаторе-провайдере как пользовательские данные, например Свойства маршрута routeProvider), я проверяю user.current, чтобы узнать, установлен ли его набор.

а. Если user.current установлен, перейдите на маршрут.

б. Если user.current имеет значение null или если токен будет истек (в зависимости от времени), отправьте их в /login

Проблемы/вопросы

Если я Ctrl+R, я теряю информацию о пользователе, и пользователь должен снова войти в систему.

а. Должен ли я сэкономить токен-носитель или учетные данные в файле cookie или что-то еще, и попросить его воспользоваться функцией пользователя в случае, если user.current == null?
Я даже подхожу к этому правилу? Кажется, что буквально 100% людей, использующих AngularJS, хотели бы сделать, но я не могу найти пример, который согласуется с моей ситуацией. Похоже, что angular будет иметь механизмы, встроенные для обработки некоторых из этих бизнес-маршрутов auth...
Когда мне нужно получить новый токен/проверить текущий? Я просто позволю кому-нибудь с devtools установить что-то вроде isAuthorized = true, чтобы они могли получить /admin/importantThings, но затем разрешить вызовы /api/important, потому что у них нет действительного токена на предъявителя, или я должен проверить, что они имеют действительный токен, прежде чем я даже позволю им добраться до этого маршрута?

Ответ 1

Вы можете поместить его в localStorage (всегда сохраненный) или sessionStorage (очищается, когда браузер закрыт). Куки файлы также являются технически возможными, но не подходят для вашего случая использования (ваш задний конец проверяет отдельный заголовок, а не файл cookie).
Я думаю, что есть много способов скинуть кошку.
Всегда зависеть от проверки на стороне сервера. Проверки на стороне клиента могут предложить некоторую повышенную удобство использования, но вы никогда не сможете зависеть от них. Если у вас много кнопок, которые приводят к переходу на экран входа в систему, это будет быстрее, если вы сохраните проверку на стороне клиента. Если это больше исключение, чем правило, вы можете вместо этого перенаправить на страницу входа, когда вы получаете 401 Unauthorized при вызове своего конца.

Ответ 2

Вот пример того, как вы можете управлять своим токеном:

/* global angular */

'use strict';

(function() {

    angular.module('app').factory('authToken', ['$window', function($window) {

        var storage = $window.localStorage;
        var cachedToken;
        var userToken = 'userToken';

        var authToken = {
            setToken: function(token) {
                cachedToken = token;
                storage.setItem(userToken, token);
            },

            getToken: function() {
                if (!cachedToken) {
                    cachedToken = storage.getItem(userToken);
                }
                return cachedToken;
            },

            isAuthenticated: function() {
                return !!authToken.getToken();
            },

            removeToken: function() {
                cachedToken = null;
                storage.removeItem(userToken);
            }
        };

        return authToken;

    }]);

})();

Как вы можете видеть, я использую "$ window.localStorage" для хранения моего токена. Как "Peter Herroelen, говорится в сообщении журнала.