Question

我用 angular v1.5.6 和 angular-ui-router v1.0.0alpha0 创建了SPA;这是我的Working Plunker。在这个SPA我有3页：登陆页面，即“/”， /主页和 /关于。首页需要登录;登录后，我们将凭据保存在本地存储中，以便在刷新页面时我们不会丢失页面。一切正常，但现在我在 / Home 页面上有问题

当我刷新 / Home 页面时，它会为 .state 和页面的 data 属性中定义的属性提供以下错误不加载

angular.min.js：117 TypeError：无法读取未定义的属性'authorizedRoles'

路由以下面的方式定义（只有下面显示的相关代码）

 $stateProvider
        .state("home", {
            url: '/home',
            templateUrl: './home/home.html',
            controller: 'HomeController',
            requiresAuth: true,
            data : { pageTitle : 'Home', authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor] }
        })

并在*.config*中使用以下代码导致错误

$transitionsProvider.onBefore({to: function(state) { return state.requiresAuth; } },
        function($transition$, $state, AuthService) {
            console.log(arguments);
            var from = $transition$.to().name;
            console.log(from);
            if(!AuthService.isAuthenticated()) {
                return $state.go("login", {referral : from});
            } else {
                console.log('I m logged in');
                var roles = $state.current.data.authorizedRoles;
                if(AuthService.isAuthorized(roles)) {
                    console.log('Authorized');
                }
            }
    });

注意：在要求登录时在该plunker中写入任何凭据。

页面刷新后$ state.current变为空白;如何处理这个问题？

Answer 1

您是否尝试过dev tool？

在app.js:76中放置一个断点，然后点击Home，您会看到当前状态是基本状态，但没有data属性。

Answer 2

使用此help from github

解决

var roles = $state.current.data.authorizedRoles;

将是

var roles = $transition$.to().data.authorizedRoles;

无法在页面刷新时重新加载相同的状态

2 个答案: