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可能是在页眉菜单和页脚中，以便在需要时动态更新链接。其次，第一个选项是最好的，因为您可以抽象出模板和控制器，您可以在路线中设置它们，从而更好地分离关注点。