Лучшая практика для обеспечения того, чтобы пользователь регистрировался или выходил с использованием файлов cookieStore и AngularJS

Сейчас я создаю приложение на основе AngularJS поверх Ruby on Rails и используя Devise для аутентификации. Я правильно отвечаю на сервер, когда пользователь успешно аутентифицируется и когда аутентификация завершается с ошибкой. Я предполагаю, что мой вопрос заключается в использовании $cookieStore, что лучше всего известно, если пользователь зарегистрирован или нет? Существует cookie, который устанавливается Rails под названием "myapp_session", но этот сеанс не обязательно означает, что пользователь вошел в систему. Ищете идеи о том, как использовать AngularJS, чтобы поддерживать онлайн-управление в автономном режиме. Я по-прежнему буду следить за тем, чтобы запросы, требующие авторизации, были авторизованы бэкэнд независимо от решения.

Ответ 1

Вы можете создать директиву, которая настраивает зарегистрированного пользователя, когда приложение загружается, например, запрашивая текущий сеанс пользователя на вашем сервере.

angular.module('Auth', [
        'ngCookies'
    ])
    .factory('Auth', ['$cookieStore', function ($cookieStore) {

        var _user = {};

        return {

            user : _user,

            set: function (_user) {
                // you can retrive a user setted from another page, like login sucessful page.
                existing_cookie_user = $cookieStore.get('current.user');
                _user =  _user || existing_cookie_user;
                $cookieStore.put('current.user', _user);
            },

            remove: function () {
                $cookieStore.remove('current.user', _user);
            }
        };
    }])
;

И установите в свой run метод в AppController:

   .run(['Auth', 'UserRestService', function run(Auth, UserRestService) {

            var _user = UserRestService.requestCurrentUser();
            Auth.set(_user);
        }])

Конечно, если любой запрос на сервер возвращает Http Status 401 - Unauthorized, вам нужно вызвать службу Auth.remove(), чтобы удалить пользователя из файла cookie и перенаправить пользователя на страницу входа.

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

Помните, что всегда проверяйте учетные данные пользователя на своем сервере. =)

[EDIT]

Чтобы прослушать ответ сервера 401 - Unauthorized, вы можете поместить перехватчик в свой запрос $http, например:

 .config(['$urlRouterProvider', '$routeProvider', '$locationProvider', '$httpProvider', function ($urlRouterProvider, $routeProvider, $locationProvider, $httpProvider) {
        $urlRouterProvider.otherwise('/home');
        var interceptor = ['$location', '$q', function ($location, $q) {

            function success(response) {
                return response;
            }

            function error(response) {

                if (response.status === 401) {
                    $location.path('/login');
                    return $q.reject(response);
                }
                else {
                    return $q.reject(response);
                }
            }

            return function (promise) {
                return promise.then(success, error);
            };
        }];

        $httpProvider.responseInterceptors.push(interceptor);
    }])

Каждый вызов с ответом 401, пользователь будет перенаправлен на страницу входа в /login.

Вы найдете хороший пример здесь

Ответ 2

Вы можете настроить cookie на обратный вызов входа в систему с помощью

$cookieStore.put('logged-in', some_value)

Затем проверьте это, когда они войдут на ваш сайт с помощью

.run(function($cookieStore) {
    if ($cookieStore.get('logged-in') === some_value) {
        let him enter
    }
    else {
        you shall not pass
    }
});

Там могут быть более "правильные" способы, но это работает.

Ответ 3

Если у вас возникли проблемы с принятием принятого ответа, будьте осторожны, что с Angular 1.3 правильным способом добавления нового перехватчика является добавление его к $httpProvider.interceptors, поэтому вместо:

$httpProvider.responseInterceptors.push(interceptor);

использование:

$httpProvider.interceptors.push(interceptor);