在使用routeProvider在Angular中启动路由之前，如何检查登录名或其他状态? [英] How do I check for login or other status before launching a route in Angular with routeProvider?

问题描述

假设我有4条路由-2条要求用户登录，2条没有.我的应用程序初始化看起来像:

Let's say I have 4 routes - 2 require the user to be logged in, 2 do not. My app init looks like:

        $routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'});
        $routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'});
        $routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'});
        $routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'});

路线/open1和/open2向所有人开放，而路线/secure1和/secure2要求用户登录，如果没有，请采取一些措施，例如重定向到登录或发出警告.我可以通过使用Auth服务并调用例如Auth.isLogin()来确定用户的状态.因此结果将是:

Routes /open1 and /open2 are open to all, while routes /secure1 and /secure2 require the user to be logged in and, if not, take some action, e.g. redirect to login or launch a warning. I can determine the user's state by using my Auth service and calling, e.g., Auth.isLogin(). So the result would be:

• 转到/open1和/open2总是转到上面声明的模板和控制器
• 如果Auth.isLogin()返回true，则/secure1和/secure2转到上面声明的模板和控制器
• 如果Auth.isLogin()返回false，则/secure1和/secure2采取其他措施，例如$location.path('/login')

• going to /open1 and /open2 always go to the template and controller declared above
• if Auth.isLogin() returns true, /secure1 and /secure2 go to the above-declared template and controller
• if Auth.isLogin() returns false, /secure1 and /secure2 take some other action, e.g. $location.path('/login')

我可以将逻辑放入Secure1和Secure2控制器中，以进行检查，但这是重复性的，混合了职责，使它们更难测试，等等.

I could put logic in the Secure1 and Secure2 controllers that checks, but that is repetitive and mixes up responsibilities, makes them harder to test, etc.

有没有一种方法可以使用$routeProvider声明检查此路由和此路由，如果没有，请重定向"?我当时正在考虑以某种方式使用resolve，但不确定如何使用它(resolve上的文档不是很清楚，并且没有几个有用的示例).

Is there a way that I can use the $routeProvider to declare, "check this route and this route and if not, redirect"? I was thinking of using resolve somehow, but not quite sure how to work it in (docs on resolve are not very clear, and few helpful examples).

根据以下答案，看来有三种方法可以做到这一点:

based on the answers below, it appears there are three philosophies for doing this:

• 使用resolve进行登录并失败诺言，然后捕获$routeChangeError事件以重定向 http://www.sitepoint.com/implementing-authentication-angular-applications/
• 仅使用$routeChangeStart事件来检查已登录并重定向 http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/
• 仅解决以下问题:登录并重定向 http://midgetontoes.com/博客/2014/08/31/angularjs-check-user-login

• Using resolve to check logged in and fail the promise, and then catching the $routeChangeError event to redirect http://www.sitepoint.com/implementing-authentication-angular-applications/
• Using just $routeChangeStart event to check logged in and redirect http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/
• Using just resolve to check logged in and redirect http://midgetontoes.com/blog/2014/08/31/angularjs-check-user-login

第二个答案是两位回答者的建议.

The 2nd option is what the two answerers have suggested.

推荐答案

正如我在上面的评论中所述，共有3种不同的路径(如果您想从html模板中控制指令，还可以使用指令).我结束了

As in my comments above, there are 3 different paths (plus the ability to use a directive if you want to control it from within html templates). I ended up following

https://midgetontoes.com/angularjs-check-user-login/

其本质如下:

$routeProvider.when('/secure', {
    templateUrl: '/secure.html', 
    controller: 'Secure',
    resolve:{
        loggedIn:onlyLoggedIn
    }
 });

然后是onlyLoggedIn:

var onlyLoggedIn = function ($location,$q,Auth) {
    var deferred = $q.defer();
    if (Auth.isLogin()) {
        deferred.resolve();
    } else {
        deferred.reject();
        $location.url('/login');
    }
    return deferred.promise;
};

简单，就像魅力一样.如果我需要指令，可以将其放入服务中.

Simple, works like a charm. If I ever need a directive, I will pull this piece into a service.

这篇关于在使用routeProvider在Angular中启动路由之前，如何检查登录名或其他状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！