即使登录后，状态也会返回到上一页

Question

After refreshing the page, the state changes back to login . I am using $sessionStorage to store the data and I am able to print them successfully after login, but when I refresh the page, my page should stay on dashboard.html but routes to login state.

angular.module('App', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngAnimate',
    'ngTouch',
    'ui.bootstrap',
    'ui.router',
    'toaster',
    'ngStorage'
])
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: "views/login.html"
            })
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: "views/dashboard.html",
                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) {

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

Here is my controller:

angular.module('App')
.controller('loginController', ['$scope', '$http', '$timeout', '$location', '$rootScope', 'AUTHEVENTS', 'authService', '$cookies', '$state', 'userManagementFactory', '$localStorage', '$sessionStorage', function ($scope, $http, $timeout, $location, $rootScope, AUTHEVENTS, authService, $cookies, $state, userManagementFactory, $localStorage, $sessionStorage) {

    $scope.login = function () {

        authService.login(data).then(function (response) {
            $rootScope.$broadcast(AUTHEVENTS.loginSuccess);
            console.log("response data is: ", response);
            $sessionStorage.auth = response;
            $sessionStorage.authname = response.data.name;
            $sessionStorage.authrole = response.data.roles[0].name;
            $sessionStorage.authuserid = response.data.user_id;
            $sessionStorage.authprofilepic = response.data.profile_picture;

            if ($sessionStorage.authuserid) {
                $state.go('dashboard');
            } else {
                alert('user not authenticated');
            }

        }, function (error) {

            $scope.responseMessage = error.data.error;
            $rootScope.$broadcast(AUTHEVENTS.loginFailed);
        }
        )
    }
}])

Html:

<div ng-controller="loginController">
    <header class="main-header" ng-include src="'views/header.html'"></header><!--/main top header -->
    <div ui-view></div>
</div>

I am not sure what is causing it to change route on page refresh?

Answer 1

StateConfig doesnt seem to accept 'required' field, please refer https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

Instead you should have

.state('dashboard', {
                url: '/dashboard',
                templateUrl: "views/dashboard.html",
                data: {
                   required: true
                }
            });

and should check like this.

if (toState.data && toState.data.required && !$sessionStorage.authuserid) {

Answer 2

Try moving $urlRouterProvider.otherwise('/login'); before

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