Angular - 在加载视图之前如何检查用户是否被允许？

我有一个角度的应用程序。我正在使用ui-router来管理我的状态。我需要调用一个通用API来检查用户是否被允许查看网页。是否有一个可以调用API的通用位置，然后才能进入用户请求的状态？Angular - 在加载视图之前如何检查用户是否被允许？

在我目前的实施中，视图部分显示，然后重新路由发生。

//app.js 

$rootScope.$on('$stateChangeSuccess', function(evt, toState) { 

    if(toState.name === 'login' || toState.name === 'payment') 
     return; 

    userService.isBillingCleared().then(function() { 
     //redirect to toState 
    }, function() { 
     $state.go('payment'); 
    }); 
});

我该如何预防？

来源

2016-04-13 Jaseem Abbas

也许使用'$ routeChangeStart'而不是'$ stateChangeSuccess'可以帮助 – Naigel

请尝试以下

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options) { 

    if(toState.name === 'login' || toState.name === 'payment') 
    return; 

    event.preventDefault(); // prevent the state change 

    userService.isBillingCleared().then(function() { 
    $state.go(toState.name); // do the state change manually if allowed 
    }, function() { 
    $state.go('payment'); 
    }); 
}));

来源

2016-04-13 07:46:57 Rovak

这没有帮助 –

它不起作用？我使用了类似的代码来做同样的事情，你是否试图实现，你检查事件是否被触发，值是否如预期的那样？ – Rovak

该页面显示几分之一秒，然后重定向到付款状态。我曾尝试删除API调用并直接重定向到状态。仍然没有帮助 –

试试这个链接，谈authentication在UI路由器的路由。似乎这将是一个很好的解决方案。

来源

2016-04-13 08:02:02 rrd

我在开发系统时遇到类似的问题，唯一的区别是我使用的是由角度提供的默认路由器，但显然不会导致任何问题。

在检查用户的认证级别之前保持数据隐藏，并制定指令以集中整个过程。让我们以这种方式想象 - 除非细节被检查，并且直到向他们显示任何预加载器或某物或任何动画，否则将向用户显示的视图将隐藏。

这是人们通常在网络应用程序或任何移动应用程序的情况下会阻止数据，除非您确信数据已准备好可以查看。

即使在加载页面之后加载数据的使用情况下，这种做法也很有用，例如，比方说，我向用户显示事务，但只有在用户调用视图后才加载事务，以便在调用视图时调用后端，这意味着用户只能看到一秒钟 - 一个空表。所以...只需使用预加载器并首先调用函数，然后让用户看到表格。

来源

2016-07-18 08:59:20

Angular - 在加载视图之前如何检查用户是否被允许？

回答

相关问题