web-dev-qa-db-ja.com

AngularJSのログインページ

すべての対話にログインが必要なWebアプリケーションがあります。AngularJSにログインページビューを実装するには、少なくとも2つの方法があります。

1つは別のビューを使用することです。たとえば、 angular-ui-router を使用しており、ログインとダッシュボードの2つの状態でトップレベルのビューを定義します。

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/login");
  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "partials/login.html"
    })
    .state('mainpage', {
      url: "/mainpage",
      templateUrl: "partials/mainpage.html",
      controller: function($scope) {
        …
      }
    });

2つ目は、ng-ifを使用することです。

<span ng-if="loggedin">
  … my main page …
</span>
<span ng-if="!loggedin">
  … login page …
</span>

2番目のオプションでは、ユーザーがページの特定のセクションに簡単にリンクできるようになり、必要に応じてログインページが自動的に表示されますが、1番目のオプションでは、これを実現するためにリダイレクトをコーディングする必要があります。

しかし、何らかの理由で、今は妥当な議論を提供できないとしても、最初のオプションの方がクリーンだと感じています。

私は今AngularJSから始めているので、これらのオプションのいずれかを決定するのに十分な経験がありません。どちらが望ましいですか？

javascriptangularjsloginsingle-page-application
15
liori

私はここで同様の質問に答えました： AngularJS Authentication + RESTful API

私は AngularJS module for serApp を記述しましたが、これは保護された/パブリックルート、ログイン/ログアウト時の再ルーティング、ステータスチェックのハートビート、セッショントークンのcookieへの保存、ディレクティブをサポートしますサインアップ/ログイン/ログアウトなど.

https://github.com/userapp-io/userapp-angular

次のいずれかを実行できます。

  1. モジュールを変更して独自のAPIに接続する、または
  2. モジュールを serApp （クラウドベースのユーザー管理API）と一緒に使用します

UserAppを使用する場合は、ユーザーのサーバー側のコード（トークンの検証以上のもの）を記述する必要はありません。 Codecademyのコース を試してみてください。

これがどのように機能するかの例をいくつか示します。

  • どのルートをパブリックにするか、どのルートをログインフォームにするかを指定する方法：

    _$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});
_

    .otherwise()ルートは、ログイン後にユーザーをリダイレクトする場所に設定する必要があります。例：

    $routeProvider.otherwise({redirectTo: '/home'});

  • エラー処理付きのログインフォーム：

    _<form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>
_

  • エラー処理のある登録フォーム：

    _<form ua-signup ua-error="error-msg">
  <input name="first_name" placeholder="Your name"><br>
  <input name="login" ua-is-email placeholder="Email"><br>
  <input name="password" placeholder="Password" type="password"><br>
  <button type="submit">Create account</button>
  <p id="error-msg"></p>
</form>
_

  • ログアウトリンク：

    _<a href="#" ua-logout>Log Out</a>_

    （セッションを終了し、ログインルートにリダイレクトします）

  • ユーザープロパティにアクセスします：

    ユーザープロパティには、userサービスを使用してアクセスします。例：_user.current.email_

    またはテンプレートで：_<span>{{ user.email }}</span>_

  • ログイン時にのみ表示する必要がある要素を非表示にします：

    _<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>_

  • 権限に基づいて要素を表示します：

    _<div ua-has-permission="admin">You are an admin</div>_

そして、バックエンドサービスに対して認証するには、user.token()を使用してセッショントークンを取得し、AJAXリクエストで送信します。バックエンドでは、- serApp API （UserAppを使用する場合）トークンが有効かどうかを確認します。

ヘルプが必要な場合は、お知らせください:)

9
Timothy E. Johansson

最初のオプションは絶対的な方法です。ng-ifを使用して私が見る唯一の場所は、おそらくヘッダーメニューとフッターにあり、必要に応じてリンクを動的に更新します。 2番目に、テンプレートとコントローラーを抽象化できるため、最初のオプションが最適です。ルートにこれらを設定して、懸念をより適切に分離できます。

3
kkemple