我正在尝试在 AngularJS 中实现基本的身份验证路由。我有一个模型,它有一个返回 promise 的授权方法。我希望路由等到授权函数返回 true 或 false 才能继续,一旦完成,它应该恢复路径或将用户重定向到登录页面。
我认为基本上我需要停止路由,调用该方法然后恢复或重定向到登录。下面是我到目前为止的代码,但我不确定如何完成暂停/恢复。有什么想法吗?
return angular.module('d', ['ngCookies', 'ngRoute'])
.config(['$routeProvider', '$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/',
{
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/login',
{
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
});
$routeProvider.otherwise({ redirectTo: '/404' });
$locationProvider.html5Mode(true);
// handle unauthorized requests by redirecting to login page
$httpProvider.responseInterceptors.push(
['$location', '$q', function ($location, $q) {
function success(response) {
return response;
}
function error(response) {
if (response.status === 401) {
$location.path('/login');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
return function (promise) {
return promise.then(success, error);
}
}]);
}])
.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.error = null;
Auth.authorize().then(function(){
$location.path('/');
},function(){
$location.path('/login');
});
});
}]);
最佳答案
您的解决方案与我不久前写的原型(prototype)非常相似。
这个想法是,每当您“触摸”服务器并遇到身份验证错误时,都会弹出一个模式窗口,要求登录 不更改 URL(您让它更改为新的 URL并留在那里)。
我的实现也基于检查 401 的拦截器。它依赖于 $rootScope 并将属性“needsLogin”设置为 true。页面模板在 needsLogin === true
时显示登录模式窗口并隐藏 ng-view(这很重要,因为新路由已加载但它丢失了它的数据)。最后,在成功登录后,登录 Controller 执行 $route.reload()
然后设置 $rootScope.needsLogin = false
。
小片段:
<div id="main" role="main" ng-show="needsLogin === false">
<div ng-view></div>
</div>
<div ng-show="needsLogin === true" ng-include="'views/login.html'" class="overlay"></div>
登录 Controller 可以是这样的:
function LoginCtrl($scope, $rootScope, $route, $http) {
$scope.login = function () {
$http.post( /* Somehow do your login */ )
.success(function () {
var deregister = $rootScope.$on('$routeChangeSuccess', function () {
// hide login / show ng-view after route has been reloaded
$rootScope.needsLogin = false;
deregister();
});
$route.reload();
})
.error(function () {
/* handle errors */
});
};
}
$route.reload()
不是整个页面刷新,它只是重新初始化路由( Controller / View 等)。希望之前被拒绝的调用能够再次运行并且页面会正常。
关于javascript - 具有授权过程的 AngularJS 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19773295/