'use strict';
angular.module('demo', ['ui.router.grant'])
.controller('DemoController', ['$scope', 'faker', function($scope, faker) {
var scope = this;
scope.roles = {
user: false,
admin: false
};
scope.toggleRole = function(role) {
scope.roles[role] = !scope.roles[role];
faker[role](scope.roles[role]);
};
}])
.factory('faker', function() {
var isUser = false,
isAdmin = false;
return {
getGuest: function() {
},
user: function(flag) {
if (!angular.isUndefined(flag)) { isUser = flag; }
return isUser;
},
admin: function(flag) {
if (!angular.isUndefined(flag)) { isAdmin = flag; }
return isAdmin;
}
};
})
.config(['$stateProvider', '$urlMatcherFactoryProvider', function($stateProvider, $urlMatcherFactoryProvider) {
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('home', {
url: '',
templateUrl: 'home.html'
})
.state('denied', {
url: '/denied',
templateUrl: 'denied.html'
})
.state('guest-only', {
url: '/guests',
templateUrl: 'only-guest.html'
})
.state('user-only', {
url: '/users',
templateUrl: 'only-user.html',
resolve: {
user: function(grant) {
return grant.only({test: 'user', state: 'denied'});
}
}
})
.state('admin-only', {
url: '/admins',
templateUrl: 'only-admin.html',
resolve: {
admin: function(grant) {
return grant.only({test: 'admin', state: 'denied'});
}
}
})
.state('except-guest', {
url: '/no-guests',
templateUrl: 'except-guest.html',
resolve: {
grant: function(grant) {
return grant.except({test: 'guest', state: 'denied'});
}
}
})
.state('except-user', {
url: '/no-users',
templateUrl: 'except-user.html',
resolve: {
grant: function(grant) {
return grant.except({test: 'user', state: 'denied'});
}
}
})
.state('except-admin', {
url: '/no-admins',
templateUrl: 'except-admin.html',
resolve: {
grant: function(grant) {
return grant.except({test: 'admin', state: 'denied'});
}
}
})
.state('combined', {
url: '/combined',
templateUrl: 'combined.html',
resolve: {
grant: function(grant) {
return grant.only([
{test: 'user', state: 'denied'},
{test: 'admin', state: 'denied'},
]);
}
}
})
.state('parent', {
abstract: true,
template: '<div ui-view></div>',
resolve: {
user: function(grant) {
return grant.only({test: 'user', state: 'denied'});
}
}
})
.state('parent.child1', {
url: '/child1',
templateUrl: 'nested.html'
})
.state('parent.child2', {
url: '/child2',
templateUrl: 'nested.html'
})
.state('parent.child3', {
url: '/child3',
templateUrl: 'nested.html'
})
}])
.run(['grant', 'faker', '$q', function(grant, faker, $q) {
grant.addTest('guest', function() {
return (!faker.admin() && !faker.user());
});
grant.addTest('user', function() {
return faker.user();
});
grant.addTest('admin', function() {
return faker.admin();
});
}]);
<!DOCTYPE html>
<html>
<head>
<title>ui-router grant demo</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<style type="text/css" media="screen">
button {
outline: none !important;
}
.dropdown-toggle {
cursor: pointer;
}
.gandalf {
border: 5px solid #777;
display: block;
margin: 0 auto;
}`
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/ryandrewjohnson/ui-router.grant/master/src/grant.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="demo" ng-controller="DemoController as demo">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Grant Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Only Allow <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="guest-only">Guest</a></li>
<li><a ui-sref="user-only">User</a></li>
<li><a ui-sref="admin-only">Admin</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Allow Except <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="except-guest">Guest</a></li>
<li><a ui-sref="except-user">User</a></li>
<li><a ui-sref="except-admin">Admin</a></li>
</ul>
</li>
<li><a ui-sref="combined">User and Admin</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Nested User <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="parent.child1">Child User #1</a></li>
<li><a ui-sref="parent.child2">Child User #2</a></li>
<li><a ui-sref="parent.child3">Child User #3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row" style="margin: 20px;">
<h3 class="text-center">Current Role(s):
<span class="label label-default" ng-hide="demo.roles.user || demo.roles.admin || demo.roles.editor">Guest</span>
<span class="label label-success" ng-if="demo.roles.user">User</span>
<span class="label label-success" ng-if="demo.roles.admin">Admin</span>
</h3>
<div>
<span>Select Roles:</span>
<button type="button" class="btn" ng-click="demo.toggleRole('user')" ng-class="{'btn-success': demo.roles.user}">User</button>
<button type="button" class="btn" ng-click="demo.toggleRole('admin')" ng-class="{'btn-success': demo.roles.admin}">Admin</button>
</div>
<div ui-view></div>
</div>
</body>
</html>
<h2>Must be User and Admin to be <strong>ALLOWED</strong></h2>
<h3>This page can be accessed by someone who has both <span class="label label-primary">user</span> and <span class="label label-primary">admin</span> roles.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2 class="text-center">You have <strong>failed</strong> the grant tests!! <br/>Which means...</h2>
<img class="gandalf" src="http://www.troll.me/images/you-shall-not-pass-gandalf/you-shall-not-pass.jpg" alt="gandalf">
<h2>Admins <strong>NOT ALLOWED</strong></h2>
<h3>This page can be accessed by all roles except <span class="label label-primary">admins</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2>Guests <strong>NOT ALLOWED</strong></h2>
<h3>This page can be accessed by all roles except <span class="label label-primary">guests</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2>Users <strong>NOT ALLOWED</strong></h2>
<h3>This page can be accessed by all roles except <span class="label label-primary">users</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2>Home Page</h2>
<p>This page is accessible by all users.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2>Users <storng>ALLOWED</storng></h2>
<h3>This page can only be accessed by <span class="label label-primary">users</span></h3>
<p>This child state inherits it's parent's user grant test. Therefore only user's can access this page.</p>
<h2>Admins <storng>ALLOWED</storng></h2>
<h3>This page can only be accessed by <span class="label label-primary">admins</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2>Guests <storng>ALLOWED</storng></h2>
<h3>This page can only be accessed by <span class="label label-primary">guests</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>
<h2>Users <storng>ALLOWED</storng></h2>
<h3>This page can only be accessed by <span class="label label-primary">users</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dictum tortor, nec pharetra velit eleifend eu. Suspendisse a malesuada nisl. Nunc tempor finibus dui non consectetur. Aliquam eu nunc vestibulum, cursus leo et, placerat tortor. Nunc volutpat risus justo, non venenatis odio maximus a. Etiam ut interdum felis, eu aliquam tortor. Donec eu tincidunt metus. Nulla rhoncus elit ornare urna porta tristique. Nullam tincidunt erat vel interdum efficitur. Curabitur tempus fermentum rhoncus. Sed orci nisl, gravida eget ullamcorper id, elementum a arcu. Donec placerat, nisi et laoreet aliquet, nisl dolor blandit ex, in efficitur magna turpis quis ex. Nullam fringilla bibendum magna, sed dignissim nulla tempor ac.</p>