StateParams在頁面刷新時使用UI路由器是空的

Question

我在項目中使用angular的UI路由器和嵌套路由，我面臨的問題是，當我使用鏈接（ui-sref）時，使用userId作爲url的一部分導航到用戶的詳細信息頁面。當我刷新頁面時，狀態參數丟失。

所以我看了一下角度演示：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和控制檯輸出（解析功能）顯示，PARAMS丟失。

html5Mode（LocationProvider）未啓用。如果userId在頁面刷新時缺失，我已經找到「解決方案」像重定向回列表，但我無法相信沒有更好的方法來解決這個問題。

這是我怎麼在概述鏈接的詳細信息頁面（以及它的工作）：

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

Answer 1

正如預期的那樣我的問題，帽子無關與UI路由器。即使您刷新頁面，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);