Handling page refresh in angular ui-router

问题

When ever I reload/refresh the page, the state routes back to root page. When I checked the value of $state.current after reload it is empty.

currentState:

Object {name: "", url: "^", views: null, abstract: true}

States:

angular.module('App', ['ngCookies','ngResource','ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: "views/login.html",
        data: {
            required: false
        }
    })
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: "views/dashboard.html",
        data: {
            required: true
        }
    });
$urlRouterProvider.otherwise('/login');
})

.run(["$rootScope", "$state", "$location", "authService", "$cookies", "$sessionStorage", function ($rootScope, $state, $location, authService, $cookies, $sessionStorage) {
$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    console.log("currentState: ", $state.current);
    console.log("toState is:", toState);

    if (toState.data.required && !$sessionStorage.authuserid) {
        alert("state not authenticated");
        e.preventDefault();
        $state.go('login');
    }
});
}]);

why the value of current state becomes empty on refresh?

来源：https://stackoverflow.com/questions/37500569/handling-page-refresh-in-angular-ui-router