AngularJS |在加载之前处理路由 [英] AngularJS | handle routing before they load

问题描述

我希望通过外部服务为我的路由创建一个简单的身份验证检查.

I wish to create a simple authentication check for my routes by external service.

我定义了对路由对象的访问要求:

I define the access requirements on the route object:

$routeProvider
    .when('/', {
        templateUrl: 'src/app/views/index.html',
        controller: 'indexCtrl',
        authenticated: true
    })
    .when('/login', {
        templateUrl: 'src/app/views/login.html',
        controller: 'loginCtrl',
        anonymous:  true
    })
    .otherwise({
        redirectTo: '/'
    })
;

然后，我在 $routeChangeStart 事件中检查我是否有权限.

Then, I check if I have permission within the $routeChangeStart event.

$rootScope.$on('$routeChangeStart', function (event, next) {
    if(next.authenticated && !$myService.isLoggedin())
        $location.path("/login");
    else if(next.anonymous && $myService.isLoggedin())
        $location.path("/secured");
});

实际上，它有效-
如果用户未通过身份验证，则将他移至登录页面，如果他已通过身份验证但路由仅适用于匿名用户，则将其移至另一个页面，等等.

Actually, it works-
if the user in not authenticated it move him to the login page, if he is authenticated but the route is for anonymous users only it move them to another page, and etc..

但是 - 这种重定向实际上是在控制器和模板加载之后发生的！它会导致我的控制器向我的 REST API 发出一些不必要的请求，即使我没有通过身份验证.

BUT- this redirection actually happening after the controllers and the templates is load! And it cause my controller to do some unnecessary request to my REST API, even if I'm not authenticated.

如何在他们处理之前处理路线?

How can I handle the route before they process?

推荐答案

我的解决方案是结合 $locationChangeStart 和 $routeChangeStart:

My solution was combining $locationChangeStart and $routeChangeStart:

$rootScope.$on('$locationChangeStart', function (event) {
    //If login data not available, make sure we request for it
    if($facebook.isConnected()==null) {
        $facebook.getLoginStatus();
        event.preventDefault();
        return;
    }

    var next=parseRoute().$$route;
    if(!Auth.loginCheck(next))
        event.preventDefault();
});

我从 angular-route.js 复制了 parseRoute() 来解析给定的 URL 以进行路由..

I copied parseRoute() from angular-route.js to parse the given URL to route..

然后我构建我的登录检查处理程序(Auth.loginCheck)，如果失败则返回 false.

Then I build my login check handler(Auth.loginCheck) in a way that if it fail it return false.

我还使用 $routeChangeStart 来处理 $route.reload() 事件，所以现在在我的身份验证状态中每次更改后，我只执行 $route.重新加载():

I also use $routeChangeStart to handle $route.reload() events, so now after every change within my authentication status I just do $route.reload():

$rootScope.$on('$routeChangeStart', function (event, next) {
    Auth.loginCheck(next);
});

最后，我只是通过使用简单的 run() 方法来确保始终运行此自定义服务.

Finally I just make sure that this custom service is always will run by using simple run() method.

我们现在使用 ngAuth，一个我们设计用来解决那个确切问题的模块(基于我之前在这里给出的答案).

We now using ngAuth, a module we designed to solve that exact problem(based on the answer I gave here before).

最后，我们开发了一个 angular-module 来解决这个问题.这个模块基于我之前在这里发布的答案.

At last, we developed a angular-module that solved this issue.. This module is based on the answer I published here before.

由于这里的要求，我们发布了一个现在可用的测试版:http://github.com/GoDisco/ngAuth

Due the requests here, we published a beta release that works now: http://github.com/GoDisco/ngAuth

随意使用它.

这篇关于AngularJS |在加载之前处理路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！