从服务器重定向到具有相同 url 的不同 ui-router 状态？答案

【问题标题】：Redirect to different ui-router state with same url from server?从服务器重定向到具有相同 url 的不同 ui-router 状态？
【发布时间】：2015-07-08 08:40:06
【问题描述】：

目前我有一个位于 url '/' 的状态 'home'。用户连接后，会加载“客户端”状态，该状态也位于 url '/' 处，并且会话会更新。是否有可能使如果用户重新加载页面，立即加载“客户端”状态而不是“主页”状态？如果它们位于不同的 url，我可以简单地让服务器执行重定向，但我希望它们都位于基本 url '/'。 ui-router 中是否有一些功能可以让我实现这一目标？

这是我的状态：

  app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

    $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomePageConroller as homeCtrl',
      templateUrl: '/views/partials/home.html',
      onEnter: function($http,$state) {
        $http.post('/checkconnected')
        .success(function(data,status) {
          if (data) {$state.go('client');}
        });
      }
    })

    .state('client', {
      url: '/',
      controller: 'ClientController as clientCtrl',
      templateUrl: '/views/partials/client.html'
    });

如您所见，我目前正在向服务器发布检查以查看客户端是否已连接，然后从 Angular 应用程序中进行重定向，但我对这个解决方案一点也不满意。该帖子需要一些时间，因此主页已完全加载并在显示客户端页面之前被用户看到。

我考虑过的一个解决方案是拥有另一个名为“客户端重定向”的状态，它确实驻留在“/客户端”并具有与“客户端”状态相同的模板，它执行相同的 $state.go on enter 而无需$http.post （因为服务器已经根据更新的会话重定向）。这将消除延迟并且不会闪烁主屏幕，但它看起来并不优雅。

【问题讨论】：

看看那个link
@StoyanDekov 我相信答案与我在上面的代码中所做的基本相同，除非authSvc 正在做一些我不知道的特殊事情。唯一的区别是在代码解析父状态“home”的模板时显示

标签： angularjs angular-ui-router state

【解决方案1】：

var app = angular.module("app", [
"ui.router"


]);

app.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/index');

$stateProvider

        .state("app", {
            abstract: true,
            url: '/app',
            templateUrl: "views/layout/app-body.html"
        })

        .state("index", {
            url: "/index",
            templateUrl: "views/home.html",
            controller: 'signinController'
        })
        .state("signin", {
            url: "/signin",
            templateUrl: "views/pages/signin.html",
            controller: 'signinController'
        })
        .state("signup", {
            url: "/signup",
            templateUrl: "views/pages/signup.html",
            controller: 'signupController'
        })




        .state('app.home', {
            url: '/home',
            templateUrl: 'views/home/home.html',
            controller: 'homeController'
        })


        .state('app.dashboard', {
            url: '/dashboard',
            templateUrl: 'views/dashboard/dashboard.html',
            controller: 'dashboardController'
        })




        .state('app.profile', {
            url: '/profile',
            templateUrl: 'views/pages/profile.html',
            controller: 'profileController'
        });

});

访问http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview？

【讨论】：

【解决方案2】：

好的，这就是我解决这个问题的方法。我将 'client' 的 url 从 '/' 重命名为 '/client'。在我的服务器上，get 请求检查用户是否已连接，如果是，则重定向到 get '/client'（这会呈现完全相同的 Angular 应用程序，只是 url 不同）。然后我将我的客户端修改为 onEnter 更改 $location.path()。意识到这实际上与 $state.go 相同，我使用 $stateChangeStart 的事件处理程序来防止状态转换。最终代码如下所示：

  app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

    $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomePageConroller as homeCtrl',
      templateUrl: '/views/partials/home.html'
    })

    .state('client', {
      url: '/client',
      controller: 'ClientController as clientCtrl',
      templateUrl: '/views/partials/client.html',
      onEnter: function($location){$location.path('/');}
    });

    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
  });

  app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
      if (fromState.name == 'client' && toState.name == 'home') {
        event.preventDefault();
      }
    });
  }]);

如果我可以进一步清理，请在下面评论。

【讨论】：