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

现在我正在Ruby on Rails上构建一个基于AngularJS的应用程序，并使用Devise进行身份validation。 当用户成功进行身份validation以及身份validation失败时，我让服务器正确响应。 我想我的问题是，使用$ cookieStore，了解用户是否登录的最佳做法是什么？ 有一个由Rails设置的cookie称为“myapp_session”，但该会话并不一定意味着用户已登录。寻找有关如何使用AngularJS来保持用户在线/离线管理的想法。 无论解决方案如何，我仍然会确保需要授权的请求得到后端的授权。

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

并在AppController中的run方法中设置：

  .run(['Auth', 'UserRestService', function run(Auth, UserRestService) { var _user = UserRestService.requestCurrentUser(); Auth.set(_user); }]) 

当然，如果对服务器的任何请求返回Http Status 401 - Unauthorized ，则需要调用Auth.remove()服务以从cookie中删除用户并将用户重定向到登录页面。

我使用这种方法并且效果很好。 您也可以使用localStorage ，但用户数据将持续很长时间。 除非您为此身份validation设置了截止日期，否则我认为不是最佳做法。

请记住始终validation服务器站点上的用户凭据=）

[编辑]

要收听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路径。

你会在这里找到一个很好的例子

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

可能有更多“正确”的方式，但这是有效的。

Answer 3

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

 $httpProvider.responseInterceptors.push(interceptor); 

使用：

 $httpProvider.interceptors.push(interceptor);