在使用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屋!