web-dev-qa-db-fra.com

Page de connexion dans AngularJS

J'ai une application Web où toutes les interactions nécessitent une connexion. Je vois au moins deux façons d'implémenter une page de connexion dans AngularJS.

La première consiste à utiliser une vue distincte: disons que j'utilise angular-ui-router et définir une vue de haut niveau avec deux états: connexion et 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) {
        …
      }
    });

La seconde consiste à simplement utiliser ng-if:

<span ng-if="loggedin">
  … my main page …
</span>
<span ng-if="!loggedin">
  … login page …
</span>

Je vois que la deuxième option permettra facilement aux utilisateurs de créer des liens vers des sections spécifiques de leurs pages, avec la page de connexion s'affichant automatiquement si nécessaire, tandis que la première option me demandera de coder des trucs de redirection pour que cela se produise.

Cependant, pour une raison quelconque, je pense que la première option est plus propre, même si je ne peux pas fournir d'arguments raisonnables maintenant.

Je commence avec AngularJS maintenant, donc je n'ai pas assez d'expérience pour décider de l'une de ces options. Lequel est le plus souhaitable?

javascriptangularjsloginsingle-page-application
15
liori

J'ai répondu à une question similaire ici: Authentification AngularJS + API RESTful

J'ai écrit un module AngularJS pour serApp qui prend en charge les routes protégées/publiques, le réacheminement lors de la connexion/déconnexion, les pulsations pour les vérifications d'état, stocke le jeton de session dans un cookie, les directives pour inscription/connexion/déconnexion, etc.

https://github.com/userapp-io/userapp-angular

Vous pouvez soit:

  1. Modifiez le module et attachez-le à votre propre API, ou
  2. Utilisez le module avec serApp (une API de gestion des utilisateurs basée sur le cloud)

Si vous utilisez UserApp, vous n'aurez pas à écrire de code côté serveur pour le contenu utilisateur (plus que la validation d'un jeton). Prenez le cours sur Codecademy pour l'essayer.

Voici quelques exemples de son fonctionnement:

  • Comment spécifier les routes qui doivent être publiques et la route qui est le formulaire de connexion: 

    $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});

    La route .otherwise() doit être définie à l'endroit où vous souhaitez que vos utilisateurs soient redirigés après la connexion. Exemple:

    $routeProvider.otherwise({redirectTo: '/home'});

  • Formulaire de connexion avec gestion des erreurs: 

    <form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>

  • Formulaire d'inscription avec gestion des erreurs: 

    <form ua-signup ua-error="error-msg">
  <input name="first_name" placeholder="Your name"><br>
  <input name="login" ua-is-email placeholder="Email"><br>
  <input name="password" placeholder="Password" type="password"><br>
  <button type="submit">Create account</button>
  <p id="error-msg"></p>
</form>

  • Lien de déconnexion:

    <a href="#" ua-logout>Log Out</a>

    (Met fin à la session et redirige vers la route de connexion)

  • Accéder aux propriétés utilisateur:

    Les propriétés utilisateur sont accessibles à l'aide du service user, par exemple: user.current.email

    Ou dans le modèle: <span>{{ user.email }}</span>

  • Masquer les éléments qui ne devraient être visibles que 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 vous authentifier auprès de vos services principaux, utilisez simplement user.token() pour obtenir le jeton de session et envoyez-le avec la demande AJAX. À l'arrière-plan, utilisez le - API UserApp (si vous utilisez UserApp) pour vérifier si le jeton est valide ou non.

Si vous avez besoin d'aide, faites le moi savoir :)

9
Timothy E. Johansson

La première option est absolument la voie à suivre, le seul endroit que je verrais en utilisant le ng-if est peut-être dans votre menu d'en-tête et votre pied de page pour mettre à jour dynamiquement les liens si nécessaire. Deuxièmement, la première option est la meilleure, car vous pouvez faire abstraction du modèle et du contrôleur, vous seriez en mesure de les définir dans l'itinéraire en vous offrant une bien meilleure séparation des préoccupations.

3
kkemple