Page de connexion en AngularJS
J'ai une application web où toutes les interactions besoin de se connecter. Je vois au moins deux moyens de mettre en place une page de connexion de vue en AngularJS.
Est d'utiliser une vue séparée: disons que je suis en utilisant angular-ui-router et de définir un affichage de niveau supérieur avec deux états: login et le tableau de bord.
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "partials/login.html"
})
.state('mainpage', {
url: "/mainpage",
templateUrl: "partials/mainpage.html",
controller: function($scope) {
…
}
});
Deuxième est de simplement faire usage de ng-si:
<span ng-if="loggedin">
… my main page …
</span>
<span ng-if="!loggedin">
… login page …
</span>
Je vois que la deuxième option permet aux utilisateurs d'accéder à des sections spécifiques de leurs pages, avec la page de connexion apparaît comme nécessaire automatiquement, alors que la première option me demander de code de redirection de certains trucs pour que cela se produise.
Cependant, pour certaines raisons, je ressens la première option est plus propre, même si je ne peux fournir aucun des arguments raisonnables maintenant.
Je commence avec AngularJS maintenant, donc je n'ai pas assez d'expérience pour décider sur l'une de ces options. Lequel est le plus souhaitable?
Je ne peux pas penser à de nombreux cas d'utilisation où la deuxième option est acceptable.
est-il vraiment de l'importance? Dans ce cas, l'application utilise les websockets pour se connecter au serveur, envoyer des données d'authentification (login, mot de passe, un mot de passe à partir d'un jeton) et reçoit un jeton de cookie qui peut être utilisé pour recharger la page sans se connecter pendant une heure. Le jeton cookie est stocké dans une sorte de navigateur de stockage local. Le
loggedin
variable est une valeur booléenne qui indique fondamentalement le mot cookie est toujours valide.pouvez-vous expliquer les inconvénients, alors?
OriginalL'auteur liori | 2013-12-10
Vous devez vous connecter pour publier un commentaire.
J'ai répondu à une question similaire ici: AngularJS Authentification + API RESTful
J'ai écrit un AngularJS module pour UserApp qui prend en charge la protection de voies publiques, le changement d'itinéraire sur la connexion/déconnexion, les battements de cœur pour les vérifications d'état, magasins du jeton de session dans un cookie, des directives pour l'inscription/connexion/déconnexion, etc.
https://github.com/userapp-io/userapp-angular
Vous pouvez soit:
Si vous utilisez UserApp, vous n'aurez pas à écrire tout le code côté serveur pour l'utilisateur trucs (plus que la validation d'un jeton). Prendre la cours sur Codecademy de l'essayer.
Voici quelques exemples de la façon dont il fonctionne:
Comment spécifier les routes qui doivent être publiques, et la route qui est le formulaire de connexion:
La
.otherwise()
route doit être fixé à l'endroit où vous souhaitez que vos utilisateurs seront redirigés après la connexion. Exemple:$routeProvider.otherwise({redirectTo: '/home'});
Formulaire de connexion avec la gestion des erreurs:
Formulaire d'inscription avec la gestion des erreurs:
Journal lien:
<a href="#" ua-logout>Log Out</a>
(Fin de la session et redirige le login de la route)
D'accès de l'utilisateur propriétés:
Propriétés de l'utilisateur sont accessibles à l'aide de la
user
service, l'e.g:user.current.email
Ou dans le modèle:
<span>{{ user.email }}</span>
De cacher des éléments qui ne devrait être visible lorsque vous êtes connecté:
<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>
Afficher un élément basé sur les autorisations:
<div ua-has-permission="admin">You are an admin</div>
Et pour s'authentifier auprès de vos services, il suffit d'utiliser
user.token()
pour obtenir le jeton de session et l'envoyer avec la requête AJAX. À la fin, utilisez le UserApp API (si vous utilisez UserApp) pour vérifier si le jeton est valide ou pas.Si vous avez besoin d'aide, faites le moi savoir 🙂
Désolé à ce sujet! Modèle sont là pour séparer les choses, donc nous n'avons pas de placer tout le code HTML dans un fichier. Comme votre balisage grandit, il est assez soignée pour séparer ces dans ses propres fichiers. Espère que j'ai répondu à votre question 🙂
Alors, pourquoi ne pourrais-je pas simplement utiliser ng-inclure pour séparer la partie de connexion à un autre modèle, si c'est la séparation qui est une grande préoccupation?
ng-comprennent toujours charger le fichier, même si vous n'en avez pas besoin. Si vous créez une route, que le fichier de modèle seront chargés uniquement lorsque l'itinéraire est utilisé.
Je suis déjà en train de compiler tous les modèles en JS-cache, qui est toujours chargée, donc ça ne marche pas fait aucune différence pour moi.
OriginalL'auteur Timothy E. Johansson
La première option est absolument la voie à suivre, le seul endroit où je voudrais le voir à l'aide de la
ng-if
est peut-être dans votre menu d'en-tête et pied de page pour mettre à jour dynamiquement les liens si besoin. Deuxièmement, la première option est le meilleur parce que vous pourriez résumé le modèle et le contrôleur, vous serez en mesure de définir ces dans l'itinéraire de vous donner une bien meilleure séparation des préoccupations.en d'autres termes, vous pouvez avoir un module de cadre, si vous aviez la connexion, vous pourriez avoir une connexion de contrôleur et de connexion de modèle et de les charger dans le <ng-view></ng-view>, et puis une fois connecté, vous serait en route pour l'admin et avoir un admin contrôleur (probablement avec plus d'enfant contrôleurs) et un admin modèle de tableau de bord, ce nouveau serait mis à jour par le routeur, ce qui n'est séparé de tout, si vous avez besoin de faire un changement de connexion, vous exactement où regarder pour votre contrôleur et votre modèle, est beaucoup plus propre qu'à l'aide des instructions if, si les déclarations de faire tout trop serré
OriginalL'auteur kkemple