Impedire l'accesso alle pagine di amministrazione in AngularJS

Question

Mi chiedo quale sia l'approccio migliore in AngularJS per proteggere le pagine di amministrazione, ovvero le pagine che i normali utenti non dovrebbero essere in grado di vedere. Ovviamente, ci sarà l'autenticazione back-end, ma poiché l'app AngularJS è lato client, le persone potrebbero ancora teoricamente guardare il routing e andare direttamente a quegli URL e guardare le pagine di amministrazione.

Uso Express, PassportJS & MongoDB (Mongoose) come backend. Naturalmente, non sarebbero in grado di interagire con le pagine di amministrazione poiché c'è un'autenticazione sul lato server durante la creazione, la cancellazione, ... ma preferirei non servire nemmeno le pagine all'utente se non hanno il accesso adeguato. Dal momento che l'app è completamente JS lato client, tuttavia, penso che questo sia praticamente impossibile dal momento che le persone possono semplicemente modificare il routing e quant'altro. Qual è il modo migliore per farlo? Grazie per qualsiasi input!

Answer 1

Perché preferiresti "non preferire" queste pagine a utenti non amministratori? Hai una vera ragione per preoccupartene, oltre all'istinto di smettere di vedere cose che non si suppone debbano vedere?

Se la sicurezza è configurata correttamente, gli utenti non amministratori non saranno in grado di accedere ai dati di amministrazione o eseguire operazioni di amministrazione. Questo è ciò su cui dovresti concentrarti, non inventare modi elaborati per impedire loro di vedere gli schermi di amministrazione che non possono usare comunque. Ogni volta che passi su questo è praticamente tempo perso, e dovresti spenderlo per cose più importanti.

Answer 2

Vorrei mettere un controllo all'interno di routeProvider. Questo deve essere fatto per ogni percorso che richiede l'autenticazione. È anche possibile scrivere un metodo separato e incollarlo su ogni percorso per evitare la duplicazione.

$routeProvider 
.when('/profile', { 
    templateUrl: 'views/profile.html', 
    controller: 'ProfileCtrl', 
    resolve: { 
    validate: function($q, $location) { 
     // Either you could maintain an array of hashes on client side 
     // a user do not have access to without login 
     // Or hit the backend url to check it more securely 
     var validateAccess = $q.defer(); 
     var isAllowed = ['profile', 'index', 'dashboard'].indexOf($location.hash()) !== -1; 

     if (!isAllowed) { 
     $location.path('/login'); 
     } 

     validateAccess.resolve(); 
     return validateAccess.promise; 
    } 
    } 
}) 
.otherwise({ 
    redirectTo: '/' 
}); 

Answer 3

Questa domanda è un po 'vecchio, ma se qualcuno è alla ricerca di una soluzione là fuori, mi stava usando un file di risorse per archiviare i miei modelli HTML e quindi recuperare con WebAPI durante la convalida permesso e solo restituire il codice HTML quando l'utente autenticato.

Answer 4

Sono d'accordo con le preoccupazioni di Chris Russo. Questo è tutto sul problema di sicurezza. Se stai utilizzando angolare per il tuo front-end, allora hai bisogno di un framework che abbia una forte capacità nel proteggere la tua applicazione se qualcuno sta tentando di attaccare il tuo sito web/applicazione. Raccomanderò il framework di primavera (spring_security) che ha dimostrato la funzionalità di protezione della tua applicazione web. È necessario assegnare ruoli a ogni utente, ad esempio ROLE_USER o ROLE_ADMIN. Non approfondirò i dettagli su come farlo, ma questo aiuterà a risolvere i tuoi dubbi. :)

Answer 5

In questo modo, inserire l'html angularJS nella pagina JSP e controllare la sessione. Se la sessione convalida fornisce l'accesso. Non sono sicuro che sia giusto così. Un altro modo è, non usare JSP, ma con ogni hit API, controlla la sessione sul server, altrimenti restituisci false. Un altro modo è al primo accesso, ottenere una chiave autogenerata, memorizzare su server e client entrambi, controllare ogni hit API.

Answer 6

Potreste usare params in ui-routerhttps://github.com/angular-ui/ui-router/tree/master