我的应用程序有2页： main.html中和的login.html 。当未通过身份验证的用户转到 /主它们应该被重定向到 /登录。

问题是， main.html中首次呈现，后一秒钟左右，当用户认证失败，的login.html 被渲染。

我怎么会从 main.html中 prevent被渲染，直到验证成功？

下面是相关code（CoffeeScript的）：

  angular.module（'对myApp'，[...]）的.config（['$ routeProvider'，（$ routeProvider） -  GT;  $ routeProvider.when'/登录'，    templateUrl：HTML / login.html的    控制器：的LoginController  $ routeProvider.otherwise    templateUrl：HTML / main.html中    控制器：MainController]）.RUN（['$ rootScope'，'$的位置，AppService服务'，（$ rootScope，$位置，应用程序） -  GT;  $ rootScope $的'$ locationChangeStart'，（事件，为newValue，属性oldValue） -  GT。    返回，如果为newValue =='/登录    。$。当（app.authenticate（））失败 - ＆GT;      $ location.path'/登录      $ rootScope。$适用（）]） 

  angular.module（'myApp.services'）工厂AppService服务'，（） -  GT。  rootRef =新的火力地堡（'https://myapp.firebaseio.com'）  用户：空  认证： - ＆GT;    递延= $ .Deferred（）    authClient =新FirebaseAuthClient rootRef，（错误，用户）=＆GT;      如果错误        ＃尝试登录时出现错误        @user = NULL        deferred.reject（）      否则，如果用户        ＃用户认证与火力地堡        @user =用户        deferred.resolve（）      其他        ＃用户将被注销        @user = NULL        deferred.reject（）    deferred.promise（） 

解决方案

好吧，我不服务模板（在你的案件 main.html中），直到用户通过身份验证。我有服务模板，如果用户进行身份验证它检查服务器上的自定义功能。如果函数我找出用户没有登录，则返回响应与401状态code。在角code我再抱请求，直到验证，然后再索要模板。

我的灵感来自这篇文章要做到这一点： HTTP： //www.espeo.pl/2012/02/26/authentication-in-angularjs-application

My app has 2 pages: main.html and login.html. When not authenticated users go to /main they should be redirected to /login.

The problem is that main.html is rendered first, and after a second or so, when user authentication fails, login.html is rendered.

How could I prevent from main.html to be rendered until authentication succeeds?

Here is the relevant code (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()

Well, I don't serve the template (in your case main.html) until the user is authenticated. I have a customized function on server for serving templates, which checks if the user is authenticated. If in the function I find out the user is not logged in, it returns response with 401 status code. In angular code I then hold the request until the authentication and then ask for the template again.

I was inspired to do this by this post: http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application