web-dev-qa-db-ja.com

ユーザーセッションをAngularに保存する方法は？

私はAngularJSを使い始めたばかりで、AngularAppにユーザーセッションを保存しようとしています。

ユーザー名とパスワードを送信する最初のステップは機能します。その後、サービスから取得したusernameを_$rootScope_に保存します。次のページには、保存されているusernameを表示できます。

ただし、更新後、_$rootScope_は空になります。

認証システムをできる限りシンプルにしようとしています。

_myApp.controller('loginController', ['$scope', '$rootScope', '$location', 'AuthService', '$route',
  function ($scope, $rootScope, $location, AuthService, $route) {

      $scope.login = function (credentials) {
        AuthService.login(credentials).then(function (response) {
          if(response.data == "0"){
            alert("Identifiant ou mot de passe incorrect");
          }
          else {
            // response.data is the JSON below 
            $rootScope.credentials = response.data;           
            $location.path("/");
          }
        });
      };

}]);
_

AuthService.login()は_$http_要求を作成します。

JSON

_ {user_id: 1, user_name: "u1", user_display_name: "Steffi"} 
_

HTML

_ <div>Welcome {{ credentials.user_display_name }}!</div>
_

私は多くのチュートリアルを試しましたが、セッションを機能させることはできません。私はすでにUserAppを使用しましたが、それは大丈夫ではありません。独自のsimple認証を作成したいと思います。

javascriptangularjssessioncookieslogin
11
Steffi

$rootScopeは単一ページのアプリなので、ページが更新されると常にリセットされます。

CookieやsessionStorageなど、クライアント側に永続的なものを使用する必要があります（両方とも有効期限があるため）。 $cookieStoreのドキュメントをご覧ください： https://docs.angularjs.org/api/ngCookies/service/$cookieStore

セッションの機密情報は暗号化する必要があります。

9
Andrew Church

使用できます

ngStorage

Web StorageをAngular Way。で動作させるAngularJSモジュール。2つのサービス$ localStorageと$ sessionStorageが含まれます。

他の実装との違い

No Getter 'n' Setter Bullshit-AngularJSホームページから：「他のフレームワークとは異なり、モデルをラップする必要はありません[...]アクセッサメソッド。単純な古いJavaScriptがここにあります。」これで、Web Storageでデータの永続性を達成しながら、同じメリットを享受できます。

sessionStorage-よく見落とされがちなこのバディをカバーしました。

きれいに作成されたコード-Angular方法で、テスト容易性を念頭に置いて適切に構成されています。

Cookieのフォールバックなし-AngularJSが公式にサポートするすべてのブラウザーでWeb Storageが容易に利用できるため、このようなフォールバックはほとんど冗長です。

サンプル例を次に示します

ワーキングデモ

var eS = angular.module('exampleStore', ['localStorage']);
12
Nidhish Krishnan

現在のユーザーを収集するには、サーバー上にAPIを作成する必要があります。このAPIは、ログイン後のユーザーオブジェクトと同じユーザーオブジェクトを返す必要があります。

$ routeProvider内で保護する$ route.pathごとに、ng-initを使用してコントローラーでこのAPIを呼び出します。 APIがオブジェクトを返す場合、オブジェクトを$ rootScopeに追加します。それ以外の場合は、ユーザーをログインページに強制します。

5
Bram E Pramono