Angular模板在重定向之前显示

时间:2014-05-14 11:14:31

标签: angularjs grails redirect

我正在使用Grails服务器端和Angular客户端。

如果不允许用户访问某个网页,我会使用Grails

重定向response.sendError(404)

它正常工作但PrivateProfileController在重定向之前正在调用,它显示模板private.html 1秒钟,然后重定向到模板404.html

有没有办法避免在重定向之前显示private.html

谢谢

Grails控制器的方法

 def privateProfile(){
     if(NOT_AUTHORIZED){
         return response.sendError(404)
     }
 }

app.config( ['$routeProvider', '$locationProvider', 
             '$tooltipProvider', '$compileProvider', '$httpProvider',
    function($routeProvider, $locationProvider, $tooltipProvider, 
             $compileProvider, $httpProvider) {
        $locationProvider.html5Mode(true) ;
        $routeProvider
          .when('/:username/private', {
             templateUrl: '/js/angular/app/userprofile/templates/private.html',
             controller: 'PrivateProfileController'
          })
            .when('/404', {
                templateUrl: '/js/angular/app/error/404.html' , 
                controller: 'HTTPErrorController'
            })
            .otherwise({

            });

            $httpProvider.responseInterceptors.push(
                ['$location', '$q', function ($location, $q) {
                    function success(response) {
                        return response;
                    }

                    function error(response) {
                        if (response.status === 404) {
                            $location.path('/404');
                            return $q.reject(response);
                        }
                        else {
                            return $q.reject(response);
                        }
                    }

                    return function (promise) {
                        return promise.then(success, error);
                    }
            }]);
    }

    ]).run(function ($rootScope) {
        $rootScope.$on('$locationChangeStart',
             function(evt, absNewUrl, absOldUrl) {
                //console.log('Start : old', absOldUrl, 'new ',absNewUrl );
        });
        $rootScope.$on('$locationChangeSuccess',
             function(evt, absNewUrl, absOldUrl) {
               //console.log('Success : old', absOldUrl, 'new ', absNewUrl);
        });
});;

app.controller("HTTPErrorController", function ($location) {
  console.log("HTTPErrorController")
});

1 个答案:

答案 0 :(得分:1)

有两个组件异步执行:

  • 基于路线呈现模板
  • XHR请求以授权状态响应。

当截获http响应时(btw响应拦截为deprecated),路由通过呈现内容并引导相应的角度控制器(PrivateProfileController)来完成其部分。收到响应后,响应被截获,路由完成到/ 404。延迟时间为1秒。 (在服务器端完成对Grails的调用以及拦截所花费的时间)

可以做的是使授权调用成为该特定路由的routeProvider's resolve的一部分:

$routeProvider
    .when('/:username/private', {
       templateUrl: '/js/angular/app/userprofile/templates/private.html',
       controller: 'PrivateProfileController',
       resolve: {
           authz: function($q){
               //Create a promise
               //Call the service (REST call to Grails)
               //Get back 404
               //Reject the promise if 404
               //route to 404
               //return promise
           }
       }
    })
    .when('/404', {
       templateUrl: '/js/angular/app/error/404.html' , 
       controller: 'HTTPErrorController'
    })
    .otherwise({

    });

如果在解析内部路由到/ 404是一个问题,那么使用$routeChangeError事件会被拒绝的承诺触发。

请参阅this question answered by Misko himself和此post,了解解决方案的工作原理。