angularjs - How do you protect /handle authenticated routes with ui-router? -

just started using angular , i'm trying learn fast can. i'm relatively new spa's please bear me , feel free tell me if want not feasible. i'm stuck on now, how protect routes when using ui-router?

what want do?

there routes don't want non-logged in users access. example, /home , /login okay anonymous users.
/dashboard should logged in.

i want if user tries access /dashboard in future without being logged in, not able to.

what have tried?

i have tried using angular-permission module found here: https://github.com/narzerus/angular-permission problem is..i'm not quite sure how use (nor if i'm using properly).

what happening?

in login controller, once user submits username , password makes /post web-sever. once gets result, (regardless of moment) i've got redirecting /dashboard.

right nothing should getting /dashboard because no permissions have been set, yet (incorrectly) allowed see dashboard. can both (1) redirected dashboard without permission , (2) access /dashboard without permission.

what code right now?

controllers.js

var controllers = angular.module('controllers',[]) // login controller -- handles login page user can enter // enter username & password. controllers.controller('logincontroller', function($scope, $state,$location, loginservice){     $scope.email = "";     $scope.password = ""      $scope.login = function(){         var data = ({email:"test", password: "ayylmao"})         loginservice.login(data).then(function(res){             console.log(res);         })         .catch(function(err){             console.log("error!");             console.log(err);             $state.go('dashboard')         })     } }) 

app.js

//definition: parent module var myapp = angular.module('clipboardapp', ['services','controllers', 'permission','ui.router']);  //code below taken angular-permission docs. angular   .module('foomodule', ['permission', 'user'])   .run(function (permissionstore, user) {     // define anonymous permission)     permissionstore       .definepermission('anonymous', function (stateparams) {       // if returned value *truthy* user has permission, otherwise don't.         //true indicates anonymous.         //always returning true indicate it's anonymous         return true;       });   });    //this serving router. myapp.config(function($stateprovider, $urlrouterprovider, $locationprovider) {      //by default go     $urlrouterprovider.otherwise('/home');      //views     $stateprovider         .state('home', {             url: '/home',             templateurl: 'views/home.html',         })         .state('login', {             url: '/login',             templateurl: 'views/login.html',             controller:  'logincontroller'         })         .state('dashboard', {             url: '/dashboard',             templateurl: 'views/dashboard.html',             controller: 'dashboardcontroller',             data: {               permissions: {                 except: ['anonymous'],                 redirectto: 'login'               }             }           });  }); 

here working example secured routes. in example state start app. go via auth interceptor. $transitions.onbefore hook can use follows satisfy requirement.

.run(($transitions, $state, $injector) => {     $transitions.onbefore({       to: 'app.**'     }, () => {       const $window = $injector.get('$window');       if (!$window.sessionstorage.getitem('user')) {         return $state.target('login', $state.transition.params());       }       return true     });   }); 

https://plnkr.co/edit/zcn2hb34mmembjulyaaj?p=info