Donc, au lieu d'essayer de trouver un exemple, j'ai créé un lieu (lien en bas). Pour expliquer comment la fonctionnalité fonctionne, je veux revenir sur quelques points:
La nouvelle ASP.NET système d'Identité fournit une authentification OAuth 2.0 Porteur du jeton de mise en œuvre qui peut être utilisé avec des clients qui utilisent une API Web de ressources sur HTTP. Depuis l'authentification n'est pas stocké dans un cookie de session, le serveur n'est pas responsable du maintien de l'authentification de l'état. L'effet secondaire est que le consommateur n'a qu'à gérer l'authentification du serveur et de gérer le retour de jeton. C'est le système que Microsoft utilise dans le SPA modèle qu'il fournit avec VS 2013.
AngularJS ne fait aucune hypothèse sur l'authentification, donc, c'est comment vous authentifier.
AngularJS fournit l' $http service pour l'interrogation à distance HTTP ainsi que des services d' $resource qui est construit au sommet d' $http. À l'aide de Authorization - têtes avec le Porteur du jeton de mise en œuvre ci-dessus, vous pouvez combiner les deux pour fournir un accès authentifié aux ressources du serveur HTTP. AngularJS permet de définir une valeur "par défaut" Authorization - tête dans chaque transaction HTTP.
Avec cela à l'esprit, la façon dont j'ai accompli, c'est par la création d'un Utilisateur de service qui gère tous les détails d'authentification, y compris l'établissement du HTTP Authorization - tête, entre les API Web server et le SPA. Basée sur le statut d'authentification de l'utilisateur, vous pouvez masquer certains éléments de l'INTERFACE utilisateur afin d'éviter de navigation. Toutefois, si vous pouvez également définir l'état comme nécessitant une authentification en tant que propriété de l' resolve objet pour l'état, pour un observateur situé sur l' $stateChangeError événement de capture de l'erreur et de rediriger l'utilisateur vers le formulaire de connexion. Après authentification, il va rediriger l'utilisateur de l'état qu'ils ont essayé de naviguer.
Afin de prévenir l'authentification d'être perdu entre les sessions de navigateur (le client est responsable du maintien de l'jeton d'authentification, et que le jeton est maintenu en mémoire), j'ai également ajouté la possibilité pour l'utilisateur de conserver l'authentification à un cookie. Tout cela est transparent pour l'utilisateur. Pour eux, il est pratiquement identique à la forme traditionnelle-et-une session d'authentification.
Je ne suis pas sûr de savoir pourquoi vous souhaitez empêcher l'utilisateur de voir les routes, mais j'ai codé en tant que tel. Je suis dans la dette à Sedushi de Plunker exemple d'utilisation de AngularUI Routeur pour naviguer dans une dynamique manière sans l'aide d'Url. Pourtant, je ne suis pas sûr que je peux personnellement recommander ce, pour toute demande, je voudrais écrire sur mon propre.
La solution complète (à la fois la WebAPI et le WebUI) est disponible à l'étape par étape les instructions ici.
Laissez-moi savoir à propos de n'importe quelle partie qui n'est pas clair, et je vais essayer de le rendre plus clair dans la réponse.
