AngularJS:或缩小使用的CookieStore被记录为确保用户的最佳实践 [英] AngularJS: best practice for ensure user is logged in or out using cookieStore

查看:104
本文介绍了AngularJS:或缩小使用的CookieStore被记录为确保用户的最佳实践的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

现在,我对建设Ruby on Rails的顶部的AngularJS基于应用程序,并利用设计进行验证。我有服务器的正确响应当用户成功验证,当验证失败。我想我的问题是,使用$的CookieStore,什么是为知道,如果一个用户登录或不是最好的做法呢?还有的是,得到由Rails的所谓myapp_session设置cookie,但会议并不一定意味着一个用户登录,寻找关于如何使用AngularJS让用户在线/离线管理理念。我仍然会确保需要授权请求得到由后端授权而不管解决方案。

Right now I am building an AngularJS based application on top of Ruby on Rails and using Devise for authentication. I have the server responding properly when a user authenticates successfully and when authentication fails. I guess my question is, using $cookieStore, what's the best practice for knowing if a user is logged in or not? There is a cookie that gets set by Rails called "myapp_session", but that session doesn't necessarily mean a user is logged in. Looking for ideas on how to use AngularJS to keep user online/offline management. I'll still be ensuring that requests that require authorization get authorized by the backend regardless of the solution.

推荐答案

您可以创建一个建立用户登录加载应用程序时,例如,要求您的服务器上当前用户会话的指令。

You can create an directive that set up the logged user when the application loads, for example, requesting the current user session on your server.

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(['Auth', 'UserRestService', function run(Auth, UserRestService) {

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

当然,如果到服务器的任何请求返回 Http状态401 - 未授权,您需要调用 Auth.remove()服务从饼干删除用户,并把用户重定向到登录页面。

Of course if any request to the server return an Http Status 401 - Unauthorized, you need to call the Auth.remove() service to remove the user from cookie and redirect the user to login page.

我使用这种方式,效果非常好。您也可以使用的localStorage ,但用户数据将持续很长一段时间。除非你为这个身份验证设置过期日期,我不认为是最佳做法。

I use this approach and works very well. You can also use the localStorage, but the user data will be persisted for a long time. Unless you set an expiration date for this authentication, I don't see as best practice.

记住要始终验证您的服务器站点的用户凭据=)

Keep in mind to always verify the user credentials on your server site =)

要听 401 - 未授权服务器的响应,你可以把你的 $ HTTP 请求拦截器一样,这样的:

To listen to 401 - Unauthorized server response, you can put an interceptor on your $http request, like this:

 .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 响应,用户会被重定向在 /登录路径到登录页面。

Every call with 401 response, the user will be redirected to login page at /login path.

您会找到一个很好的例子,<一个href=\"http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/\">here

You will find a good example here

这篇关于AngularJS:或缩小使用的CookieStore被记录为确保用户的最佳实践的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆