JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<div ng-app="myApp">
    <nav>
        <a ui-sref="default">Default</a>
        <a ui-sref="notProtected">Not Protected</a>
        <a ui-sref="protected">Protected</a>
    </nav>
    <div ui-view=""></div>
    <br />
    {{$state}}
</div>

JavaScript

var app = angular.module('myApp',['ngRoute','ui.router']);
app.config(function($stateProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $stateProvider
    .state('default',{url:'',controller:"defaultCtrl",template:"default"})
    .state('notProtected',{url:'not-protected',controller:"notProtectedCtrl",template:"not protected"})
    .state('protected',{url:'protected',controller:"protectedCtrl",template:"protected"})
    ;
});

app.run(function($rootScope, $state, $timeout) {
  $rootScope.$state = $state;
  $rootScope.$on('$stateChangeStart', function(e, to) {
      console.log("In Chnage Start Event Listener")
      e.preventDefault();
      
      console.log("Faking the delay")
      // Simulate server Delay / Async call
      $timeout(function(){
          // simple way to simulate if the call would grant access or not.
          // It would be some server logic that returns something,
          // not a compaison to a state name, but this is just a proof
          if(to.name != 'protected'){
              console.log("Its Ok, they can go to the requested state")
              $state.transitionTo(to,{},{
                  notify:false});
          }else{
              console.log("They need to go to a different state that they have access to")
              $state.transitionTo("notProtected",{});
          }
      },1000);
  });
});

app.controller('defaultCtrl',function($scope){

});
app.controller('notProtectedCtrl',function($scope){

});
app.controller('protectedCtrl',function($scope){

});