AngularJS：如何在用户通过身份验证之前隐藏模板内容？答案

【问题标题】：AngularJS: How to hide the template content until user is authenticated?AngularJS：如何在用户通过身份验证之前隐藏模板内容？
【发布时间】：2013-02-08 01:48:18
【问题描述】：

我的应用有 2 个页面：main.html 和 login.html。当未通过身份验证的用户转到/main 时，他们应该被重定向到/login。

问题是先渲染main.html，等一秒左右，当用户认证失败时，渲染login.html。

如何防止 main.html 在身份验证成功之前呈现？

这里是相关代码（CoffeeScript）：

angular.module('myApp', [...])
.config(['$routeProvider', ($routeProvider) ->
  $routeProvider.when '/login',
    templateUrl: 'html/login.html'
    controller: LoginController

  $routeProvider.otherwise
    templateUrl: 'html/main.html'
    controller: MainController
])
.run(['$rootScope', '$location', 'appService', ($rootScope, $location, app) ->
  $rootScope.$on '$locationChangeStart', (event, newValue, oldValue) ->
    return if newValue == '/login'

    $.when(app.authenticate()).fail ->
      $location.path '/login'
      $rootScope.$apply()
])

angular.module('myApp.services').factory 'appService' , () ->
  rootRef = new Firebase('https://myapp.firebaseio.com')

  user: null
  authenticate: ->
    deferred = $.Deferred()

    authClient = new FirebaseAuthClient rootRef, (error, user) =>
      if error
        # An error occurred while attempting login
        @user = null
        deferred.reject()
      else if user
        # User authenticated with Firebase
        @user = user
        deferred.resolve()
      else
        # User is logged out
        @user = null
        deferred.reject()

    deferred.promise()

【问题讨论】：

米莎，我的答案似乎不是你想要的。您能澄清一下您要完成的工作吗？

标签： angularjs firebase firebase-security angularjs-routing angularjs-authentication

【解决方案1】：

好吧，在用户通过身份验证之前，我不会提供模板（在您的情况下为 main.html）。我在服务器上有一个用于提供模板的自定义功能，它检查用户是否经过身份验证。如果在函数中我发现用户没有登录，它会返回带有 401 状态码的响应。然后在角度代码中，我将请求保留到身份验证，然后再次请求模板。

这篇文章启发了我这样做：http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

【讨论】：

【解决方案2】：

我对相同要求的解决方案是定义以下手表：

$rootScope.$watch(
    function() {
        return $location.path();
    },
    function(newValue, oldValue) {  
        if (newValue != '/login' && user is not logged in) {
            $location.path('/login');  
        }
    },
    true);

在与索引页的正文元素关联的控制器中（即包含ng-view 指令的页面）。

【讨论】：

【解决方案3】：

一种选择是隐藏普通 DOM 并显示“正在验证...”消息，可能带有微调器，让用户了解他/她为什么坐在那里等待某事发生。在 main.html 中，包括以下内容：

<spinner ng-hide="appService.wrapper.user"></spinner>
<!-- everything else ng-show="appService.wrapper.user" -->

其中<spinner></spinner> 是一个Angular directive，它被您的自定义“Authenticating...”消息替换，user 是您的appService 提供给MainController 的变量。请注意，您可能需要将 user 包装在 appService 内的对象中，如下所示：

.service('appService', function() {

  var wrapper = {
    user: null
  };

  function authenticate() {
    // start the authentication and return the promise,
    // but modify wrapper.user instead of user
  }

  return wrapper;

});

您还需要将appService 或appService.wrapper 存储在MainController 的$scope 变量中。

【讨论】：