使用 angular ui-router 有条件地导航到状态 [英] Conditionally navigate to state with angular ui-router

问题描述

目前，我们有一个测试版的投资组合"工具.一旦用户登录到主应用程序，如果他们获得了 Beta 版的访问权限，他们就可以直接导航到 Portfolio 工具，无需任何额外的登录.如果没有，他们应该被重定向到投资组合登录页面(状态称为投资组合.login)，在那里他们可以登录或联系支持/销售等.现在我在解决块中进行了检查，但是 $state.go('portfolio.login') 似乎获取正确的部分，但不会在屏幕上呈现它们或导航到适当的 URL.

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.

代码:

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'
            }
        }
    })

推荐答案

几天前我遇到了同样的问题.我没有使用解析，而是检查用户是否在状态更改时被记录，定义 run 模块并监听 $stateChangeStart 事件，然后检查当前状态是否需要身份验证.如果是，请检查用户是否已登录.

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;


    });
  };

这篇关于使用 angular ui-router 有条件地导航到状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！