使用 ui-router 刷新页面时，StateParams 为空答案

【问题标题】：StateParams are empty on page refresh using the ui-router使用 ui-router 刷新页面时，StateParams 为空
【发布时间】：2016-04-28 21:33:15
【问题描述】：

我在一个项目中使用了 Angular 的 ui-router 和嵌套路由，当我使用链接 (ui-sref) 以 userId 作为一部分导航到用户的详细信息页面时，我遇到了这样一个问题：一切都像魅力一样的网址。当我刷新页面时，状态参数丢失。

因此，我查看了 angular 演示：http://angular-ui.github.io/ui-router/sample/#/contacts/1/item/b，但无法重现此行为，但与我的应用程序相比，嵌套状态不是此演示的一部分。

$stateProvider
    .state('base', {
      abstract: true
    })
    .state('home', {
      parent: 'base',
      url: '/',
      views: {
        'content@': {
          templateUrl: 'app/index/index.view.html',
          controller: 'IndexController',
          controllerAs: 'home'
        }
      }
    })
    .state('users', {
      url: '/users',
      parent: 'base',
      abstract: true
    })
    .state('users.list', {
      url: '/list',
      views: {
        'content@': {
          templateUrl: 'app/users/users.list.html',
          controller: 'UsersController',
          controllerAs: 'users'
        }
      },
      permissions: {
        authorizedRoles: UserRoles.ALL_ROLES
      }
    })
    .state('users.details', {
      url: '/:userId/details',
      views: {
        'content@': {
          templateUrl: 'app/users/user.details.html',
          controller: 'UserDetailsController',
          controllerAs: 'userDetails'
        }
      },
      resolve: {
        logSomeParams: ['$stateParams', '$state', function ($stateParams, $state) {
          console.log($stateParams);
          console.log(this);
          console.log($state);
        }]
      }
    })

刷新页面时，url 立即更改为http://localhost:3000/#/users//details，并且控制台输出（解析功能）显示参数丢失。

html5Mode (LocationProvider) 未启用。如果在页面刷新时缺少 userId，我已经找到了“解决方案”，例如重定向回列表，但我无法相信没有更好的方法来解决这个问题。

这就是我在概述中链接详细信息页面的方式（并且它正在工作）：

  <div class="panel-body" ui-sref="users.details({userId: user.siloUserId})">

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

不出所料，我的问题与ui-router 无关。 URLMatcher 按预期工作，即使您刷新页面（其他一切都会非常令人失望）。

但是，我有一个 $stateChangeStart 侦听器，它检查 SAML 身份验证会话 (cookie) 是否仍然有效并等待结果。

function(event, toState, toParams, fromState, fromParams){
    if(!authenticationService.isInitialized()) {
      event.preventDefault();
      authenticationService.getDeferred().then(() => {
        $state.go(toState);
      });
    } else {
      //check authorization
      if ( authenticationService.protectedState(toState) && !authenticationService.isAuthorized(toState.permissions.authorizedRoles)) {
        authenticationService.denyAccess();
        event.preventDefault();
      }
    }
}

不知道这是怎么发生的，但我忘记将参数传递给stateProvider 的go 方法。所以我所要做的就是添加参数：

$state.go(toState, toParams);

【讨论】：