AngularJS SPA Isolate Scope Directive Claims 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 class="body-content panel-body">
    <div class="container-fluid">
    <div class="row">
                <div class="col-lg-12">
                    <h4 class="page-header">Isolate Scope Directive Claims Authorization - ozkary.com</h4>
                </div>
                <!-- /.col-lg-12 -->
    </div>
     <div class="row" ng-controller="app.ctrl.grid as ctrl">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                           My Claims
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body text-center" >      
                          <authorize-scope
                                 authorize-mapping="ctrl.claimMapping"                               
                                 authorize-callback="ctrl.claimResults">
                            </authorize-scope>
                              
                            <ul class="list-group text-left">
                                <li ng-repeat="(key,value) in ctrl.claims" class="list-group-item">
                                    <label...

JavaScript

(function() {
        'use strict';
        
        var app = angular.module('app', []);
        app.factory('app.svc.auth', [svcAuth]);
        app.directive('authorizeScope', ['app.svc.auth', dirAuthScope]);      
        app.controller('app.ctrl.grid', ['app.svc.auth', ctrlGrid]);
               
        function svcAuth() {

            //simple claims container for demo purposes
            var claims = { 'Name': 'Ozkary', 'Title': 'Tech', 'app.delete': true, 'app.edit': true, 'app.create': true };

            function hasClaim(key) {
                return claims[key];//todo  handle multiple claims
            }

            return {
                claims: claims,
                hasClaim:hasClaim
            };
        }
      
       function dirAuthScope($svcAuth) {
           return {
               restrict: 'E',
               scope: {
                   authorizeMapping: '&',
                   authorizeCallback: '&',                   
               },//isolate scope                                      
               link: function (scope, elem, attrs) {
                   console.log('loading isolate directive');
                   var watch = function () {
                       //get the claim to variable maps - execute call for claim mapping
                       var claims = scope.authorizeMapping()();
                       var callback = scope.authorizeCallback();
                      
                       if (claims && typeof (claims) === 'object') {
                          
                           for (var item in claims) {                              
                               var claim = claims[item];
                               var result = $svcAuth.hasClaim(claim);
                               claims[item] = result;
                           }
                           callback(claims);
                       }
                   }                   
                   scope.$watch(watch);
               }
  ...