AngularJS中的登录页面

Question

我有一个Web应用程序，其中所有交互都需要登录。我看到至少有两种方法在AngularJS中实现登录页面视图。

一种是使用单独的视图：假设我使用angular-ui-router并定义具有两种状态的顶级视图：登录和仪表板。

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) {
        …
      }
    });

其次是只使用ng-if：

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

我看到第二个选项很容易允许用户链接到他们页面的特定部分，登录页面会自动显示，而第一个选项将要求我编写一些重定向的东西以实现这一点。

但是，出于某种原因，我觉得第一种选择是更清洁，即使我现在不能提供任何合理的论据。

我现在开始使用AngularJS，所以我没有足够的经验来决定这些选项。 哪一个更可取？

Answer 1

我在这里回答了类似的问题： AngularJS Authentication + RESTful API

---

我为UserApp编写了一个AngularJS模块 ，它支持受保护/公共路由，在登录/注销时重新路由，用于状态检查的心跳， 将会话令牌存储在cookie中，用于注册/登录/注销的指令等。

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

你可以：

1. 修改模块并将其附加到您自己的API，或
2. 将该模块与UserApp （基于云的用户管理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请求发送它。 在后端，使用UserApp API （如果使用UserApp）检查令牌是否有效。

如果您需要任何帮助，请告诉我:)

Answer 2

第一个选项绝对是要走的路，我唯一能看到使用ng-if的地方可能是在你的标题菜单和页脚中根据需要动态更新链接。 其次，第一个选项是最好的，因为你可以抽象出模板和控制器，你可以在路线中设置这些选项，让你更好地分离关注点。