Javascript 确保用户使用cookieStore和AngularJS登录或注销的最佳实践

现在，我正在RubyonRails之上构建一个基于AngularJS的应用程序，并使用Desive进行身份验证。我让服务器在用户成功认证和认证失败时正确响应。我想我的问题是，使用$cookieStore，了解用户是否登录的最佳实践是什么？Rails设置了一个cookie，称为“myapp_会话”，但该会话并不一定意味着用户已登录。寻找如何使用AngularJS保持用户在线/离线管理的想法。无论采用何种解决方案，我仍将确保需要授权的请求得到后端的授权。

您可以创建一个指令，在应用程序加载时设置登录用户，例如，请求服务器上的当前用户会话

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);
            }
        };
    }])
;

并在

AppController

中的

run

方法中设置：

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

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

当然，如果对服务器的任何请求返回

Http状态401-Unauthorized

，则需要调用

Auth.remove（）

服务从cookie中删除用户并将用户重定向到登录页面

我使用这种方法，效果很好。您也可以使用

localStorage

，但用户数据将被持久化很长时间。除非您设置此身份验证的过期日期，否则我认为这不是最佳做法

请记住，要始终验证服务器站点上的用户凭据=）

[编辑]

要侦听

401-未经授权的

服务器响应，您可以在

$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

路径的登录页面

---

您将发现一个很好的示例

您可以使用

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

然后在他们进入您的站点时使用

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

---

可能有更多“正确”的方法，但这是可行的

如果您在使用公认的答案时遇到问题，请注意，从Angular 1.3开始，添加新拦截器的正确方法是将其添加到$httpProvider.interceptors，而不是：

$httpProvider.responseInterceptors.push(interceptor);

使用：

---

这是一个奇妙的反应。谢谢你的洞察力。这很有用。我得到一个关于未知提供程序的错误：$urlRouterProvider。您使用的是angular v1.2吗？很抱歉。。。在您的例子中，什么是UserRestService？它是通过REST在服务器会话中加载当前用户的资源。我在服务器端使用会话管理来避免客户机cookie中的信任。

$httpProvider.interceptors.push(interceptor);