Angular - Wie überprüft man, ob der Benutzer erlaubt ist, bevor die Ansicht geladen wird?

Question

Ich habe eine eckige App. Ich benutze ui-router, um meine Zustände zu verwalten. Ich muss eine gemeinsame API aufrufen, um zu überprüfen, ob der Benutzer die Webseite sehen darf oder nicht. Gibt es einen gemeinsamen Ort, an dem ich die API aufrufen kann und erst dann zu dem Zustand übergehen kann, für den der Benutzer anfragt?

Mit meiner aktuellen Implementierung wird die Ansicht teilweise angezeigt und dann passiert die Umleitung.

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

Wie verhindere ich das?

Answer 1

Versuchen Sie, die folgende

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

Answer 2

diesen Link Versuchen, die über authentication für Routen in ui-Router spricht. Scheint so, als wäre das eine gute Lösung für dich.

Answer 3

Ich hatte ein ähnliches Problem während der Entwicklung eines Systems und der einzige Unterschied war, dass ich Standard-Router, der von eckigen zur Verfügung gestellt wird, aber offensichtlich, dass kein Problem verursachen wird.

Lassen Sie die Daten verborgen, bevor Sie den Authentifizierungslevel des Benutzers überprüfen und leiten Sie die Anweisung zur Zentralisierung des gesamten Prozesses ein. Stellen wir uns das so vor: Die fragliche Ansicht, die Sie dem Benutzer zeigen, ist verborgen, es sei denn, die Details werden geprüft, und bis dann zeigen Sie ihnen alle Preloader oder etwas oder was auch immer Animation Sie wollen.

Dies ist, was im Allgemeinen Menschen im Falle einer Web-App oder einer mobilen Anwendung tun, verstopfen Sie die Daten, es sei denn Sie sind sicher, dass ja die Daten bereit sind, angezeigt zu werden.

Diese Vorgehensweise kann auch nützlich sein, wenn Sie die Daten laden, nachdem die Seite geladen wurde, z. Angenommen, ich zeige dem Benutzer Transaktionen an, aber die Transaktionen werden erst geladen, nachdem der Benutzer die Ansicht aufgerufen hat, so dass beim Aufruf der Ansicht ein Aufruf an das Backend erfolgt, was bedeutet, dass der Benutzer nur für einen Sekundenbruchteil eine leere Tabelle sehen kann. Also ... benutzen Sie einfach einen Preloader und rufen Sie zuerst die Funktion auf und lassen Sie dann den Benutzer die Tabelle sehen.