Comment pouvez-vous intégrer plusieurs sections d'une application AngularJS avec leurs applications Angular respectives, en redirigeant l'« application d'accueil » vers l'« application de tableau de bord » une fois la connexion réussie ?

Authentification de connexion au routeur ui-routeur AngularJS : intégration de plusieurs sections

Question :

Supposons que vous avoir une application AngularJS avec deux sections : une page d'accueil avec des fonctionnalités de connexion et d'inscription, et un tableau de bord accessible après une connexion réussie. Maintenant, vous souhaitez combiner ces sections avec leurs applications angulaires respectives. Comment pouvez-vous rediriger « l'application d'accueil » vers « l'application de tableau de bord » une fois la connexion réussie ?

Solution :

1. Gestion des identités avec le service « Principal » :

Créez un service nommé « principal » pour gérer l'identité des utilisateurs. Ce service résoudra les informations sur les utilisateurs et effectuera des vérifications de rôle.

2. Autorisation avec le service « Autorisation » :

Implémentez un service « Autorisation » qui vérifie l'état de destination prévu de l'utilisateur. S'ils ne sont pas connectés, redirigez-les vers la page de connexion. S'ils sont authentifiés mais n'ont pas le(s) rôle(s) requis, envoyez-les vers une page d'accès refusé.

3. Surveillance des changements d'état :

Utilisez l'événement $stateChangeStart du routeur Angular-UI pour intercepter les changements d'état. Vérifiez si l'utilisateur est autorisé pour l'état demandé. Si ce n'est pas le cas, annulez la transition ou redirigez-les en conséquence.

4. Résolution d'identité dans Resolve Hook :

Assurez-vous que l'identité de l'utilisateur est résolue avant les vérifications d'autorisation. Utilisez le hook 'resolve' dans la configuration de l'état du routeur ui pour ce faire.

5. Combinaison de sections :

Créez un état parent pour l'ensemble de l'application appelé « site », dans lequel vous pouvez forcer la résolution d'identité via le hook « résoudre ». Cet État parent devrait faire abstraction des éléments suivants :

<code class="javascript">$stateProvider.state('site', {
  'abstract': true,
  resolve: {
    authorize: ['authorization',
      function(authorization) {
        return authorization.authorize();
      }
    ]
  },
  template: '<div ui-view></div>'
})</code>

6. Autorisation basée sur l'état :

Définissez les configurations d'état avec « data.roles » pour restreindre l'accès en fonction des rôles d'utilisateur. Par exemple, pour restreindre une ressource aux administrateurs, utilisez :

<code class="javascript">.state('restricted', {
    parent: 'site',
    url: '/restricted',
    data: {
      roles: ['Admin']
    },
    views: {
      'content@': {
        templateUrl: 'restricted.html'
      }
    }
  })</code>

7. Affichage conditionnel dans les vues :

Injectez « principal » dans les contrôleurs pour vérifier l'état de connexion et l'affichage du modèle de contrôle. Par exemple :

<code class="html"><div ng-show="principal.isAuthenticated()">
  I'm logged in
</div></code>

En suivant ces étapes, vous pouvez intégrer de manière transparente plusieurs sections de votre application, appliquer l'authentification des utilisateurs et contrôler l'accès en fonction des rôles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!