5

AngularJS と Flask フレームワークを使用した REST-API ビルドを使用して Web アプリを構築しています。

アプリは次の 2 つの部分で構成されています。

  • ユーザーがログインする必要がない部分: 登録、ログイン、機能のチェックアウト...

  • ユーザーがログインする必要がある部分。

物事をシンプルにするために、これら 2 つの部分を 2 つの角度のあるアプリに分けて、ログインしているかどうかに応じて Flask が適切なアプリに誘導できるようにすることを考えていました。

これが良いアプローチかどうか疑問に思っていましたか？これで、認証をかなりシンプルに保つことができると思います。

4

5 に答える 5

1

Flask と Angular を一緒に使用するのは、本当に素晴らしいフルスタックです。また、コードが巧妙であれば、これらの他の回答が示唆するような重複はありません。実際、最新のフロントエンドとバックエンドの分離により、非常に高速なスタックが得られます。このコードをチェックしてください: https://github.com/mattupstate/overholt

Overholt アプリは、フロントエンドがフックするバックエンドを提供する Flask のエレガントな組み合わせの好例です。Flask は、API、Web アセット パイプライン、およびユーザー認証を処理します。Backbone または Angularjs は、ユーザーが認証されるとサイトが提供する製品であるフロントエンド Web アプリケーションを処理します。

于 2013-12-13T18:26:47.570 に答える
0

免責事項: 私は Flask を多用し、Angular を少し使用しました (常にバックエンドで Flask を使用しています)。

これはオプションですが、多くのコードを複製することになると思います (「デモ」ページの表示など、アプリケーション間で機能が同じ場合)。最善の策は、単一のアプリケーションで Angular レベルで実行することです。

Google グループで興味深いアイデアをいくつか読んだことを覚えているので、参考になるかもしれません。

もちろん、Flask での作業に慣れていて、できるだけ早く製品をリリースしたい場合は、おそらくコントローラー間でコードを共有するのが最善の方法です。ただし、この状況には欠点があります。Flask はユーザーを正しいアプリケーションに誘導する必要がありますが、ログインしていないユーザーがログインする必要がある部分にアクセスしようとすると、アプリ/ページのリロードが発生します (2 つ目のアプリを使用する必要があるため)。フィールは、Angular が設計された単一ページ Web アプリケーションの目的を無効にします。

于 2013-08-09T21:10:20.013 に答える
0

2 つの AngularJS アプリに分割するのが良い考えである場合、良い答えはありません。しかし、それらを 1 つの AngularJS アプリケーションとして保持するのは非常に簡単で、重複を避けるのが容易になるため、それらを 2 つに分割する必要はないと思います。Flask と AngularJS を一緒に使用して Web アプリケーションを構築するチュートリアル シリーズを作成しました。ぜひチェックしてみてください - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

于 2015-03-08T04:13:43.517 に答える
0

(開示: 私は UserApp の開発者の 1 人です)

独自のユーザー管理を行いたくない場合は、 AngularJS モジュールと一緒にサードパーティ サービスUserAppを試すことができます。

入門ガイドに従うか、Codecademy のコースを受講してください。これがどのように機能するかの例を次に示します。

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

    <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>

    ua-is-emailユーザー名が電子メールと同じであることを意味します。

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

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

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

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

  • ログアウト リンク:

    <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 要求と共に送信するだけです。バックエンドでUserApp APIを使用して、トークンが有効かどうかを確認します。また、Python ライブラリにも取り組んでいます。

何か助けが必要な場合は、私に知らせてください:)

于 2013-12-16T23:36:45.823 に答える