我正在制作一個更好的演示，并將其中的一些服務清理成一個可用的模塊，但下面是我想出的。這是一個復雜的過程，以解決一些注意事項，所以堅持住。你需要把它分解成幾塊。
看看這個.
首先，您需要一個服務來存儲用戶的身份。我稱之為principal..它可以被檢查以查看用戶是否登錄，并且根據請求，它可以解析一個表示有關用戶身份的基本信息的對象。這可以是您需要的任何東西，但是基本要素是顯示名稱、用戶名、可能是電子郵件，以及用戶所屬的角色(如果這適用于您的應用程序)。主體還具有執行角色檢查的方法。
.factory('principal', ['$q', '$http', '$timeout',
function($q, $http, $timeout) {
var _identity = undefined,
_authenticated = false;
return {
isIdentityResolved: function() {
return angular.isDefined(_identity);
},
isAuthenticated: function() {
return _authenticated;
},
isInRole: function(role) {
if (!_authenticated || !_identity.roles) return false;
return _identity.roles.indexOf(role) != -1;
},
isInAnyRole: function(roles) {
if (!_authenticated || !_identity.roles) return false;
for (var i = 0; i < roles.length; i++) {
if (this.isInRole(roles[i])) return true;
}
return false;
},
authenticate: function(identity) {
_identity = identity;
_authenticated = identity != null;
},
identity: function(force) {
var deferred = $q.defer();
if (force === true) _identity = undefined;
// check and see if we have retrieved the
// identity data from the server. if we have,
// reuse it by immediately resolving
if (angular.isDefined(_identity)) {
deferred.resolve(_identity);
return deferred.promise;
}
// otherwise, retrieve the identity data from the
// server, update the identity object, and then
// resolve.
// $http.get('/svc/account/identity',
// { ignoreErrors: true })
// .success(function(data) {
// _identity = data;
// _authenticated = true;
// deferred.resolve(_identity);
// })
// .error(function () {
// _identity = null;
// _authenticated = false;
// deferred.resolve(_identity);
// });
// for the sake of the demo, fake the lookup
// by using a timeout to create a valid
// fake identity. in reality, you'll want
// something more like the $http request
// commented out above. in this example, we fake
// looking up to find the user is
// not logged in
var self = this;
$timeout(function() {
self.authenticate(null);
deferred.resolve(_identity);
}, 1000);
return deferred.promise;
}
};
}])其次，您需要一個服務來檢查用戶想要進入的狀態，確保他們已經登錄(如果必要的話；對于簽名、密碼重置等等來說不需要)，然后進行角色檢查(如果您的應用程序需要這樣的話)。如果未對其進行身份驗證，請將其發送到登錄頁。如果它們經過身份驗證，但未通過角色檢查，則將它們發送到拒絕訪問的頁面。我叫這個服務authorization.
.factory('authorization', ['$rootScope', '$state', 'principal',
function($rootScope, $state, principal) {
return {
authorize: function() {
return principal.identity()
.then(function() {
var isAuthenticated = principal.isAuthenticated();
if ($rootScope.toState.data.roles && $rootScope.toState
.data.roles.length > 0
&& !principal.isInAnyRole(
$rootScope.toState.data.roles))
{
if (isAuthenticated) {
// user is signed in but not
// authorized for desired state
$state.go('accessdenied');
} else {
// user is not authenticated. Stow
// the state they wanted before you
// send them to the sign-in state, so
// you can return them when you're done
$rootScope.returnToState = $rootScope.toState;
$rootScope.returnToStateParams = $rootScope.toStateParams;
// now, send them to the signin state
// so they can log in
$state.go('signin');
}
}
});
}
};
}])現在你要做的就是傾聽ui-router氏$stateChangeStart..這使您有機會檢查當前狀態、他們希望進入的狀態，并插入授權檢查。如果失敗，您可以取消路由轉換，或者更改為其他路由。
.run(['$rootScope', '$state', '$stateParams',
'authorization', 'principal',
function($rootScope, $state, $stateParams,
authorization, principal){
$rootScope.$on('$stateChangeStart',
function(event, toState, toStateParams)
{
// track the state the user wants to go to;
// authorization service needs this
$rootScope.toState = toState;
$rootScope.toStateParams = toStateParams;
// if the principal is resolved, do an
// authorization check immediately. otherwise,
// it'll be done when the state it resolved.
if (principal.isIdentityResolved())
authorization.authorize();
});
}
]);跟蹤用戶身份的棘手部分是，如果您已經通過了身份驗證，就查找它(例如，您在上一次會話之后訪問該頁面，并在cookie中保存了一個auth令牌，或者您可能很難刷新頁面，或者從鏈接中拖到URL上)。因為這條路ui-router有效，您需要在檢查之前完成一次身份解析。您可以使用resolve選項在狀態配置中。對于所有狀態繼承的站點，我有一個父狀態，它強制在發生其他任何事情之前解析主體。
$stateProvider.state('site', {
'abstract': true,
resolve: {
authorize: ['authorization',
function(authorization) {
return authorization.authorize();
}
]
},
template: '<div ui-view />'})還有另一個問題.。resolve只接到一次電話。一旦您的身份查找承諾完成，它將不再運行解決委托。因此，我們必須在兩個地方進行您的檢查：一是按照您的身份承諾進行檢查，二是在resolve，這將涵蓋您的應用程序第一次加載，并在其中一次加載。$stateChangeStart如果決議已經完成，這將涵蓋您在各州之間導航的任何時間。
好吧，到目前為止我們做了什么？
- 我們檢查應用程序何時加載，如果用戶登錄。
- 我們跟蹤有關登錄用戶的信息。
- 我們將它們重定向到狀態簽名，以獲取需要用戶登錄的狀態。
- 如果它們沒有訪問權限，我們會將它們重定向到拒絕訪問的狀態。
- 如果需要用戶登錄，我們有一種機制可以將用戶重定向回他們請求的原始狀態。
- 我們可以簽出一個用戶(需要與管理您的auth票證的任何客戶端或服務器代碼進行協調)。
- 我們
別
每次用戶重新加載瀏覽器或刪除鏈接時，都需要將用戶送回登錄頁面。
我們從這里去哪兒？你可以把你的州組織成需要登錄的區域。您可以通過添加data帶著roles對于這些狀態(如果要使用繼承，則為它們的父狀態)。在這里，我們將資源限制為管理員：
.state('restricted', {
parent: 'site',
url: '/restricted',
data: {
roles: ['Admin']
},
views: {
'content@': {
templateUrl: 'restricted.html'
}
}
})現在，您可以按州控制用戶可以訪問的路由。還有其他擔心嗎？可能只根據它們是否登錄來更改視圖的一部分？沒問題。使用principal.isAuthenticated()甚至principal.isInRole()使用多種方法中的任何一種，您都可以有條件地顯示模板或元素。
首先，注射principal放入控制器或任何東西中，并將其固定在作用域上，以便您可以輕松地在視圖中使用它：
.scope('HomeCtrl', ['$scope', 'principal',
function($scope, principal){
$scope.principal = principal;});顯示或隱藏元素：
<div ng-show="principal.isAuthenticated()">
I'm logged in</div><div ng-hide="principal.isAuthenticated()">
I'm not logged in</div>
等等。無論如何，在您的示例應用程序中，您將有一個主頁狀態，允許未經身份驗證的用戶來訪。它們可以有登錄或注冊狀態的鏈接，也可以將這些表單內置到頁面中。任何適合你的。
儀表板頁都可以從一個要求用戶登錄的狀態繼承，例如，它是一個User角色成員。我們討論過的所有授權內容都是從那里流出來的。
