web-dev-qa-db-ja.com

ユーザーがcookieStoreとAngularJSを使用してログインまたはログアウトすることを確認するためのベストプラクティス

現在、AngularJSベースのアプリケーションをRuby on Railsで作成し、認証にDeviseを使用しています。ユーザーが正常に認証されるとサーバーが正しく応答します認証が失敗した場合、私の質問は、$ cookieStoreを使用して、ユーザーがログインしているかどうかを知るためのベストプラクティスは何でしょうか？Rails called "しかし、そのセッションは必ずしもユーザーがログインしていることを意味するわけではありません。AngularJSを使用してユーザーをオンライン/オフライン管理する方法についてのアイデアを探しています。承認を必要とするリクエストは、ソリューションの。

javascriptruby-on-railscookiesangularjs
22
randombits

たとえば、サーバー上の現在のユーザーセッションを要求するなど、アプリケーションの読み込み時にログに記録されるユーザーを設定するディレクティブを作成できます。

_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を使用することもできますが、ユーザーデータは長期間保持されます。この認証の有効期限を設定しない限り、ベストプラクティスとは思えません。

サーバーサイトのユーザー資格情報を常に確認することに注意してください=）

[編集]

_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_パスのログインページにリダイレクトされます。

良い例があります here

37
Deividi Cavarzan

ログインコールバックで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
    }
});

もっと「正しい」方法があるかもしれませんが、これは機能します。

4
Zack Argyle

Angular 1.3の時点で、新しいインターセプターを追加する適切な方法は$ httpProvider.interceptorsに追加することです。の：

$httpProvider.responseInterceptors.Push(interceptor);

使用する：

$httpProvider.interceptors.Push(interceptor);
2
Maciej Gurban