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 - 在加載視圖之前如何檢查用戶是否被允許？

回答

相關問題