我已经使用 angularjs 玩了几天,到目前为止我很喜欢它。我正在尝试构建一个 chrome 扩展程序,当用户在 gmail.com 上时,它会在每条 gmail 邮件下方附加一个小部件。到目前为止,一切都很好。作为身份验证代码的一部分,我以这种方式处理 401 错误。每当出现 401 错误时,我都会使用 $location.path( "/login") 将用户重定向到登录屏幕/模板。这会更改浏览器地址栏,这似乎是默认行为。所以,如果当前地址是 https://mail.google.com/mail/u/0/ , 它变成了 https://mail.google.com/mail/u/0/#/login .但我的不是独立的应用程序,它更像是在 gmail.com 网站上附加到 div 的小部件。我的应用不应与浏览器地址栏混淆。我现在开始考虑我是否真的可以在我的应用程序中使用 angularjs,因为我违背了默认行为。我到底应该使用 angularjs 吗?
我也贴在这里 https://groups.google.com/forum/?fromgroups#!topic/angular/TrT54r_IYmg
最佳答案
您可以在 rootScope 上发出/广播事件,并在您的登录指令中订阅它们。
这里有一点线索 http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application
它使用拦截器来捕获 401
myapp.config(function($httpProvider) {
var interceptor = ['$rootScope','$q', function(scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
var deferred = $q.defer();
var req = {
config: response.config,
deferred: deferred
}
scope.requests401.push(req);
scope.$broadcast('event:loginRequired');
return deferred.promise;
}
// otherwise
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor);
});
最简单的指令可能是这个
myapp.directive("loginForm",function($http){
return function(scope,element,attrs){
element.hide();
scope.$root.$on('event:loginRequired', function(event) {
element.show();
});
scope.login=function(){
// You can set controller for this directive, but I skiped that part for sake of simplicity
var payload = $.param({username: scope.username, password: scope.password});
var config = {
headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
}
$http.post('/some/login/url', payload, config).success(function(data) {
if (data === 'AUTHENTICATION_SUCCESS') {
element.hide();
}else{
alert("username or password was wrong, please try again");
elements.find("form").reset(); // reset form, or you coud reset just password field
}
});
};
};
});
现在,指令生效
<div login-form>
<form ng-submit="login()">
<label for="username">Username</label>
<input type="text" id="username" ng-model="username"/>
<br />
<label for="password">Password</label>
<input type="password" id="password" ng-model="password" />
<hr/>
<input type="submit" value="Login" />
</form>
</div>
请注意 上面的代码没有经过测试,可能有拼写错误之类的。但是,如果您在执行此操作时遇到困难,请告诉我,我会尝试花一些时间和精力让它发挥作用。
关于javascript - 在没有 $routeProvider 和 $location 的情况下使用 angularjs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11803726/