5

我正在使用 AngularJS 构建一个 Web 应用程序，并使用 Flask 框架构建一个 REST-API。

该应用程序由两部分组成：

  • 用户无需登录的部分：他们可以注册、登录、查看功能...

  • 用户必须登录的部分。

为了简单起见，我想将这两个部分分成两个 Angular 应用程序，让 Flask 根据您是否登录将您引导到正确的应用程序。

我想知道这是否是一个好方法？我认为有了这个我可以保持身份验证非常简单。

4

5 回答 5

10

我不确定两个单独的应用程序是否是个好主意。

如果你这样做，似乎你会有相当多的重复，因为我认为这两个应用程序不会相互排斥。至少，我想当用户登录时，公共选项也将可用，对吧？这意味着大部分公共应用程序、客户端和服务器端都必须是受保护应用程序的一部分。这听起来很难维护。

还要考虑用户体验。用户必须在登录和注销时下载一个全新的应用程序，至少是第一次下载，直到它进入浏览器的缓存。根据您的应用程序的大小，可能需要等待几秒钟。

标准方法是拥有一个 Angular 应用程序和一个 Flask 应用程序。Angular 应用程序开始并显示所有可用选项，并根据用户的操作向 Flask 发送 Ajax 请求。

如果用户尝试做一些需要登录的事情，那么 Flask 将响应代码 401 错误。然后，Angular 可以显示一个登录对话框来获取登录凭据，然后再次提交 Ajax 请求，现在使用凭据，可能是基于安全 HTTP 的 HTTP 基本身份验证。从那时起，Angular 可以将登录凭据附加到所有请求，以便用户现在可以使用所有选项。

如果您不想在每个请求中都发送登录信息，那么您可以get_auth_token在 Flask 应用程序中使用一个端点来获取凭据并将令牌发送回 Angular。然后 Angular 可以将令牌附加到所有后续请求。

Angular 中的注销选项然后只是删除凭据和/或令牌再次变得未经授权。

我在这个答案中更详细地解释了其中一些想法。尽管该问题的上下文是 Node.js，但这些原则也适用于 Flask。

您还可以查看我关于该主题的教程。我在服务器上使用 Flask，在客户端使用 Knockout.js，但是如果你使用 Angular 而不是 Knockout，这些概念应该直接翻译。这是他们三个：

于 2013-08-09T22:23:20.593 回答
1

嘿，一起使用 Flask 和 Angular 是非常好的全栈。而且，如果您对代码很聪明，那么您将不会像这些其他答案所建议的那样得到任何重叠。实际上，您将获得具有现代前端/后端分离的极快堆栈。检查此代码： https ://github.com/mattupstate/overholt

Overholt 应用程序是 Flask 优雅组合的一个很好的例子，它为后端提供了一个可以连接到前端的服务。Flask 处理 API、网络资产管道和用户身份验证。一旦用户通过身份验证，Backbone 或 Angularjs 会处理前端 Web 应用程序，即您的网站提供的产品。

于 2013-12-13T18:26:47.570 回答
0

免责声明：我用过很多 Flask，也很少用过 Angular（总是在后端使用 Flask）。

这是一个选项，但我认为您会复制大量代码（如果您的应用程序之间的功能相同，例如查看“演示”页面）。最好的办法是在单个应用程序中以 Angular 级别运行它。

我记得在Google Group中阅读了一些有趣的想法，所以也许这可以帮助你。

当然，如果你对在 Flask 中做这件事感到很自在，并且希望尽快推出你的产品，那么控制器之间的代码共享也许是最好的方式。但是，这种情况也有缺点；Flask 必须将用户引导到正确的应用程序，但是未登录的用户想要访问他们必须登录的部分，会导致应用程序/页面重新加载（因为他们现在必须使用第二个应用程序），我感觉违背了 Angular 设计的单页 Web 应用程序的目的。

于 2013-08-09T21:10:20.013 回答
0

（披露：我是UserApp的开发者之一）

如果您不想推出自己的用户管理，您可以尝试第三方服务UserApp以及AngularJS 模块。

遵循入门指南，或参加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 回答
0

如果将它分成两个 AngularJS 应用程序是一个好主意，我没有一个好的答案。但我认为没有必要将它们分成两部分，因为将它们作为一个 AngularJS 应用程序非常容易，并且更容易避免重复。我已经编写了一个关于使用 Flask 和 AngularJS 一起构建 Web 应用程序的教程系列。你可能想看看 - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

于 2015-03-08T04:13:43.517 回答