AngularJS SPA Navbar Claims Based Authorization

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div ng-app="app">
    <div id="container" >

        <div id="page-wrapper">

            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#app-menu">
                        <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="#">Route Claims Authorization by ozkary.com</a>
                </div>
                 <div class="collapsed navbar-collapse" id="app-menu">
                    <ul class="nav navbar-nav" ng-controller="app.ctrl.menu as ctrl">
                        <li ng-repeat="item in ctrl.menu">
                            <a authorize="item.claims" href="#{{item.url}}" ng-show="item.show"><i class="fa {{item.icon}}"></i> <span ng-bind="item.title"></span></a>
                        </li>                                                            
                    </ul>
                </div>
            </nav>          ...

CSS

.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

JavaScript

(function() {
        'use strict';
        
         var appRoutes = [{
            title: "Login",
            url: "/",           
            templateUrl: "views/main.html",
            controller:null,
            controllerAs: null,           
            requiredAuth: false,
            show: true,
            icon: 'fa-home'
        },
        {
            title: "Claims",                //todo-auth add claims module
            url: "/claims",
            templateUrl: "views/claims.html",
            controller: "app.ctrl.claims",
            controllerAs: "ctrl",
            redirectTo: '/noaccess',
            claims: "app.claims",
            requiredAuth: true,
            show: true,
            icon:'fa-key'           
        },
        {
            title: "No Access",
            url: "/noaccess",           
            templateUrl: "views/noaccess.html",
            controller: null,
            controllerAs: null,
            requiredAuth: false            
        }];

        var app = angular.module('app', ['ngRoute']);
        app.constant('$appRoutes', appRoutes)
        app.config(['$routeProvider', '$appRoutes', appConfig]);
        app.run(['$rootScope', '$location', runApp]);
        app.factory('app.svc.auth', [svcAuth]);            
        app.controller('app.ctrl.claims', ['app.svc.auth','$scope', ctrlClaims]);
        app.controller('app.ctrl.menu', ['$appRoutes',ctrlMenu]);
        app.directive("authorize", ['app.svc.auth', dirAuthorize]);
                
        function appConfig($routeProvider, $appRoutes) {

            $appRoutes.forEach(function (route) {
                configRoute(route);
                function configRoute(route) {
                    $routeProvider
                        .when(route.url, {
                            templateUrl: route.templateUrl,
                            controller: route.controller,
                            controllerAs: route.controllerAs,
                           ...