AngularJS SPA 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">
                    <h3 class="page-header">Directive Claims Authorization - ozkary.com</h3>
                </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" >                        
                            <ul class="list-group text-left">
                                <li ng-repeat="(key,value) in ctrl.claims" class="list-group-item">
                                    <label style="width:150px;">{{key}}</label>
                                    <input type="text" class="form-control-static form-input" maxlength="25" ng-disabled="key !== ctrl.selected" ng-model="ctrl.claims[key]" />
                                    <span class="pull-right">
                              ...

JavaScript

(function() {
        'use strict';
        
        var app = angular.module('app', []);
        app.factory('app.svc.auth', [svcAuth]);
        app.directive('authorize', ['app.svc.auth', dirAuth]);       
        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 dirAuth($svcAuth) {           
           return {
               restrict: 'A',
               scope: true,
             
               link: function (scope, elem, attrs) {
                   console.log('loading directive - ' + attrs.authorize);
                   var watch = function () {
                       //get the claim value                     
                       var claims = attrs.authorize;                       
                       if (claims) {                          
                           var result = $svcAuth.hasClaim(claims);
                           if (!result) {                             
                               elem.hide();                              
                           } else {
                               elem.show();
                           }
                       }
                   }
                   //watch for the element binding           
                   scope.$watch(watch);                                    
               }
           };
       };
       

       function ctrlGrid($svcAuth) {
           var ctrl = this;
           var storage = angular.copy($svcAuth.claims);
           ctrl.claims = $svcAuth.claims;
           

          ...