Wie können Sie mehrere Abschnitte einer AngularJS-Anwendung in ihre jeweiligen Angular-Apps integrieren und bei erfolgreicher Anmeldung die „Home-App' zur „Dashboard-App' umleiten?

AngularJS UI-Router-Anmeldeauthentifizierung: Mehrere Abschnitte integrieren

Frage:

Angenommen, Sie Sie verfügen über eine AngularJS-Anwendung mit zwei Abschnitten: einer Homepage mit Anmelde- und Registrierungsfunktionen und einem Dashboard, auf das nach erfolgreicher Anmeldung zugegriffen werden kann. Jetzt möchten Sie diese Abschnitte mit ihren jeweiligen Angular-Apps kombinieren. Wie können Sie nach erfolgreicher Anmeldung die „Home-App“ zur „Dashboard-App“ umleiten?

Lösung:

1. Identitätsverwaltung mit „Principal“-Dienst:

Erstellen Sie einen Dienst mit dem Namen „Principal“, um die Benutzeridentität zu verwalten. Dieser Dienst löst Benutzerinformationen auf und führt Rollenprüfungen durch.

2. Autorisierung mit „Autorisierungs“-Dienst:

Implementieren Sie einen „Autorisierungs“-Dienst, der den beabsichtigten Zielstaat des Benutzers überprüft. Wenn sie nicht angemeldet sind, leiten Sie sie zur Anmeldeseite weiter. Wenn sie authentifiziert sind, aber nicht über die erforderliche(n) Rolle(n) verfügen, leiten Sie sie an eine Seite mit verweigertem Zugriff weiter.

3. Überwachung von Zustandsänderungen:

Verwenden Sie das $stateChangeStart-Ereignis des Angular-UI-Routers, um Zustandsänderungen abzufangen. Prüfen Sie, ob der Benutzer für den angeforderten Status berechtigt ist. Wenn dies nicht der Fall ist, brechen Sie den Übergang ab oder leiten Sie sie entsprechend um.

4. Identitätsauflösung im Resolve Hook:

Stellen Sie sicher, dass die Benutzeridentität vor Autorisierungsprüfungen aufgelöst wird. Verwenden Sie dazu den Hook „resolve“ in der UI-Router-Statuskonfiguration.

5. Abschnitte kombinieren:

Erstellen Sie einen übergeordneten Status für die gesamte Anwendung namens „Site“, in dem Sie die Identitätsauflösung über den Hook „resolve“ erzwingen können. Dieser übergeordnete Zustand sollte Folgendes abstrahieren:

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

6. Statusbasierte Autorisierung:

Definieren Sie Statuskonfigurationen mit „data.roles“, um den Zugriff basierend auf Benutzerrollen einzuschränken. Um beispielsweise eine Ressource auf Administratoren zu beschränken, verwenden Sie:

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

7. Bedingte Anzeige in Ansichten:

Fügen Sie „Principal“ in Controller ein, um den Anmeldestatus zu überprüfen und die Vorlagenanzeige zu steuern. Zum Beispiel:

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

Indem Sie diese Schritte befolgen, können Sie mehrere Abschnitte Ihrer Anwendung nahtlos integrieren, Benutzerauthentifizierung erzwingen und den Zugriff basierend auf Rollen steuern.

Das obige ist der detaillierte Inhalt vonWie können Sie mehrere Abschnitte einer AngularJS-Anwendung in ihre jeweiligen Angular-Apps integrieren und bei erfolgreicher Anmeldung die „Home-App' zur „Dashboard-App' umleiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!