Angular - 具有不同模板的相同Url（UI路由器）

Question

我有一个场景，其中许多网址在登录和登出时都可以访问。我正在考虑有一个父母状态，我可以处理必要的解决办法（如果登录后获取用户信息等），并且所有状态都是该根状态的子项。然后在模板中，我可以根据用户状态为元素执行ng-if。这一切都很好，除了一件事：当访问令牌无效导致状态不加载时，API服务器发送401响应。

我真的很想解决这个问题，同时保持HTTP响应。 基本例如：

根状态：

$stateProvider.state('base', { 
     controller: 'BaseController', 
     controllerAs: 'vm', 
     template: '<ui-view layout="row" flex />', 
     abstract: true, 
     resolve: { 
      me: function (userService) { 
       return userService.me(); 
      } 
     }, 
     data: { 
      auth: false 
     } 
}); 

在家状态：

$stateProvider.state('base.home', { 
     controller: 'HomeController', 
     controllerAs: 'vm', 
     url: '/home', 
     templateUrl: 'home/home.html', 
     data: { 
      auth: false 
     } 
    }); 

我想这样做，即使me解析401仍然加载控制器/模板当data.auth是false。否则，我只是$state.go('login')或类似的东西。

Answer 1

发生了什么是UI-Router正从您的Ajax调用中获得401响应，在这种情况下，它将无法解析me，并且不会加载状态。你需要将你的ajax调用包装在另一个Promise中，这样你可以处理401，并且仍然解决Promise，只需用null解决。

$stateProvider.state('base', { 
    controller: 'BaseController', 
    controllerAs: 'vm', 
    template: '<ui-view layout="row" flex />', 
    abstract: true, 
    resolve: { 
    me: ['userService', function (userService) { 
     return userService.me().catch(function(error) { 
      //user is not logged in, but eat the error so 
      //the state still loads, just with user = null 
      return null; 
     });   
    }] 
    }, 
    data: { 
    auth: false 
    } 
});