Meilleure façon de faire respecter l'état utilisateur / authentification dans l'application Ember.JS

Question

Mon travail sur mon premier EmberJS app. La totalité de l'app exige qu'un utilisateur soit connecté. Je suis d'essayer d'envelopper ma tête autour de la meilleure façon de faire respecter qu'un utilisateur est connecté maintenant (quand la page est chargé pour la première fois) et dans le futur (lorsque l'utilisateur est déconnecté et il n'y a pas de rafraichissement).

J'ai l'authentification de l'utilisateur crochets traités - droit maintenant, j'ai une braise-modèle de données et les associés du magasin qui relie qui gère autoriser un utilisateur et la création d'un utilisateur "session" (à l'aide de sessionStorage).

Ce que je ne sais pas comment faire est de faire valoir ce que de l'authentification de l'utilisateur lors de la transition à travers les routes, y compris la transition initiale de la racine de l'itinéraire. Où dois-je mettre cette logique? Si j'ai une authentification statemanager, comment dois-je brancher dans les routes? Si j'ai une auth route qui est en dehors de la racine des routes?

Remarque: laissez-moi savoir si cette question est mal formulé ou j'ai besoin d'expliquer quelque chose de mieux, je serai heureux de le faire.

Edit: J'ai fini par faire quelque chose que je considère un peu plus de braise-esque, mais éventuellement un désordre de la mise en œuvre. J'ai un auth statemanager qui stocke le courant de l'utilisateur de la clé d'authentification, ainsi que l'état actuel.

Chaque fois que quelque chose a besoin d'une authentification, il demande simplement à la authmanager pour elle et passe une fonction de callback à exécuter avec la clé d'authentification. Si l'utilisateur n'est pas connecté, il tire un formulaire de connexion, tenant désactiver la fonction de rappel jusqu'à ce que l'utilisateur se connecte.

Voici certains des portions de code que j'utilise. Besoins de nettoyage, et j'ai laissé de côté certaines choses. http://gist.github.com/3741751

Answer 1

Si vous avez besoin d'effectuer un contrôle avant le début de la transition d'état, il y a une fonction spéciale sur l' Ember.Application catégorie deferReadiness(). Les commentaires du code source:

Par défaut, le routeur va commencer à essayer de traduire l'URL courante dans l'état de l'application une fois que le navigateur émet l' DOMContentReady événement. Si vous il est nécessaire de reporter de routage, vous pouvez appeler l'application de l' deferReadiness()méthode. Une fois le routage peut commencer, appelez l' advanceReadiness() méthode.

Notez qu'au moment de l'écriture de cette fonction n'est disponible que dans la braise-dernière

Answer 2

En termes de revérifier l'authentification entre la route des transitions, vous pouvez ajouter des crochets à la enter et exit méthodes Ember.Route:

var redirectToLogin = function(router){
    // Do your login check here.
    if (!App.loggedIn) {
        Ember.run.next(this, function(){
            if (router.currentState.name != "login") {
                router.transitionTo('root.login');
            }
        })
    }
};

// Define the routes.
App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        enter: redirectToLogin,
        login: Ember.Route.Extend({
            route: 'login',
            exit: redirectToLogin,
            connectOutlets: function(router){
                router.get('applicationController').connectOutlet('login');
            }
        }),
        ....
    })
});

Le problème avec cette solution est que la Braise sera en fait la transition vers la nouvelle Route (et donc de charger toutes les données, etc), avant la transition de retour à votre connexion itinéraire. De sorte que, potentiellement, expose des éléments de votre application, vous ne voulez pas les voir plus longtemps. Cependant, la réalité est que l'ensemble de ces données est toujours chargé en mémoire et accessible via la console JavaScript, donc je pense que c'est une solution décente.

Rappelez-vous aussi que depuis la Braise.L'itinéraire.étendre renvoie un nouvel objet, vous pouvez créer votre propre enveloppe et ensuite les réutiliser dans votre application:

App.AuthenticatedRoute = Ember.Route.extend({
    enter: redirectToLogin
});
App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: App.AuthenticatedRoute.extend({
            ...
        })
    })
});

Si vous utilisez la solution ci-dessus, alors vous pouvez cherry pick exactement les itinéraires que vous authentifier. Vous pouvez également déposer le "vérifier s'ils sont en transition vers l'écran de connexion" à cocher en redirectToLogin.

Answer 3

J'ai mis en place un package très simple pour gérer la session et l'authentification appelé Ember.Session https://github.com/andrewreedy/ember-session

Answer 4

S'il vous plaît également jeter un oeil à: http://www.embercasts.com/

Il y a deux screencasts sur l’authentification.

Merci.