有条件的导航具有角UI路由器声明 [英] Conditionally navigate to state with angular ui-router

问题描述

目前，我们已经在公测的投资组合工具。一旦主应用程序用户登录，如果他们被获准进入公测，就可以浏览到直接投资组合工具，没有任何额外的登录。如果不是，他们应该被重定向到一个投资组合的登录页面（状态称为portfolio.login），在那里他们可以登录或联系支持/销售等。现在我有决心块的检查，但是state.go $（图集.login文件​​），似乎来获取正确的谐音，但不会使它们在屏幕上或导航到相应的URL。

code：

  angular.module（'portfolio.manager'）。配置（函数（$ logProvider，$ stateProvider）{
使用严格的;    $ stateProvider
    .STATE（'portfolio.manager'，{
        网址：'/经理，
        解析：{
            CheckLoggedIn：函数（$状态的loggedIn）{
                变种_loggedIn = loggedIn.checkUser（）;
                如果（！_loggedIn）{
                    $ state.go（'portfolio.login'）;
                    的console.log（'未授权'）;
                }
            }，
            portfolioAuthService：portfolioAuthService'，            网友：功能（portfolioAuthService）{
              返回portfolioAuthService.getUser（）;            }，
            投资组合：功能（用户，portfolioManagerService）{
                返回portfolioManagerService.getPortfolios（）;
            }
        }，
        观点：{
            主@：{
                templateUrl：应用程序/投资/经理/投资组合manager.html'，
                控制器：'PortfolioManagerCtrl
            }，
            [e-mail]：{
                templateUrl：应用程序/投资/经理/谐音/不portfolios.html
            }，
            [e-mail]：{
                templateUrl：应用程序/投资/经理/谐音/ create.html上
            }
        }
    }）
 

解决方案

我在同样的问题跑了天前。而不是使用决心，我检查，如果用户登录时的状态变化，定义运行模块和听 $ stateChangeStart 事件，然后检查如果当前状态所需的身份验证。如果是这样，检查用户登录。

  angular.module（'portfolio.manager'）。配置（函数（$ logProvider，$ stateProvider）{
使用严格的;    $ stateProvider
    .STATE（'portfolio.manager'，{
        网址：'/经理，
        解析：{
            portfolioAuthService：portfolioAuthService'，            网友：功能（portfolioAuthService）{
              返回portfolioAuthService.getUser（）;            }，
            投资组合：功能（用户，portfolioManagerService）{
                返回portfolioManagerService.getPortfolios（）;
            }
        }，
        数据：{
            requiredAuthentication：真
        }，
        观点：{
            主@：{
                templateUrl：应用程序/投资/经理/投资组合manager.html'，
                控制器：'PortfolioManagerCtrl
            }，
            [e-mail]：{
                templateUrl：应用程序/投资/经理/谐音/不portfolios.html
            }，
            [e-mail]：{
                templateUrl：应用程序/投资/经理/谐音/ create.html上
            }
        }
    }）}）
。跑跑）;  运行$注入='$ rootScope'，'$状态'，'的loggedIn']。  功能运行（$ rootScope，$状态的loggedIn）{    $ rootScope。在（'$ stateChangeStart'$，功能（即toState）{      如果收益率（（toState.data）！）;
      如果收益率（（toState.data.requiredAuthentication）！）;      VAR _requiredAuthentication = toState.data.requiredAuthentication;
      如果（_requiredAuthentication＆放大器;＆放大器;！loggedIn.checkUser（））{        亦即preventDefault（）;
        $ state.go（'portfolio.login'，{通知：假}）;
        的console.log（'未授权'）;
      }
      返回;
    }）;
  };
 

Currently, we have a 'Portfolio' tool in beta. Once a user logs in to the main app, if they have been given access to the beta, they can navigate to the Portfolio tool directly, without any additional login. If not, they should be redirected to a Portfolio login page (state is called portfolio.login) where they can login or contact support/sales etc. Right now I have the check in the resolve block, however $state.go('portfolio.login') seems to fetch the right partials, but doesn't render them on screen or navigate to the appropriate URL.

Code:

angular.module('portfolio.manager').config(function ($logProvider, $stateProvider) {
'use strict';

    $stateProvider
    .state('portfolio.manager', {
        url: '/manager',
        resolve: {
            CheckLoggedIn: function ($state, loggedIn) {
                var _loggedIn = loggedIn.checkUser();
                if (!_loggedIn) {
                    $state.go('portfolio.login');
                    console.log('not authorized');
                }
            },
            portfolioAuthService: 'portfolioAuthService',

            User: function(portfolioAuthService){
              return portfolioAuthService.getUser();

            },
            Portfolios: function (User, portfolioManagerService) {
                return portfolioManagerService.getPortfolios();
            }
        },
        views: {
            'main@': {
                templateUrl: 'app/portfolio/manager/portfolio-manager.html',
                controller: 'PortfolioManagerCtrl'
            },
            '[e-mail]': {
                templateUrl: 'app/portfolio/manager/partials/no-portfolios.html'
            },
            '[e-mail]': {
                templateUrl: 'app/portfolio/manager/partials/create.html'
            }
        }
    })

解决方案

I ran in the same problem days ago. Instead of using resolve, I check if the user is logged when state changes, defining run module and listening $stateChangeStart event, then check if the current state required authentication. If so, check if the user is logged in.

angular.module('portfolio.manager').config(function ($logProvider, $stateProvider) {
'use strict';

    $stateProvider
    .state('portfolio.manager', {
        url: '/manager',
        resolve: {
            portfolioAuthService: 'portfolioAuthService',

            User: function(portfolioAuthService){
              return portfolioAuthService.getUser();

            },
            Portfolios: function (User, portfolioManagerService) {
                return portfolioManagerService.getPortfolios();
            }
        },
        data: {
            requiredAuthentication: true
        },
        views: {
            'main@': {
                templateUrl: 'app/portfolio/manager/portfolio-manager.html',
                controller: 'PortfolioManagerCtrl'
            },
            '[e-mail]': {
                templateUrl: 'app/portfolio/manager/partials/no-portfolios.html'
            },
            '[e-mail]': {
                templateUrl: 'app/portfolio/manager/partials/create.html'
            }
        }
    })

})
.run(run);

  run.$inject = ['$rootScope','$state','loggedIn'];

  function run($rootScope,$state,loggedIn){

    $rootScope.$on('$stateChangeStart',function(e,toState){

      if ( !(toState.data) ) return;
      if ( !(toState.data.requiredAuthentication) ) return;

      var _requiredAuthentication = toState.data.requiredAuthentication;


      if (_requiredAuthentication && !loggedIn.checkUser() ){

        e.preventDefault();
        $state.go('portfolio.login', { notify: false });
        console.log('not authorized');
      }
      return;


    });
  };

这篇关于有条件的导航具有角UI路由器声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！