Question

我正在为我的Spring后端API开发一个EmberJS前端，我需要解决的第一件事是“登录”屏幕。我一直在阅读网络上的教程以及我在Ember上可以找到的任何东西，然而，问题似乎是有太多不同版本的相同教程和不同的方法做同样的事情。这让我感到困惑，但是，经过大量的努力，我想我可能最终设法让我的登录屏幕工作（部分）。

它使用ajax很好地验证，我可以在开发控制台中看到一切正常。

在我继续前进之前，我首先想要了解人们对我迄今为止编写的余烬代码的看法，以及它是否属于ember应用程序的“最佳实践”。此外，如果有更好的方法可以解决同样的问题。

其次，我不知道如何在成功登录时切换到不同的视图。我承认我还不熟悉ember的概念，但是在线教程让我感到困惑。

我真的很感激这里有任何帮助。我是一个快速学习者，我认为我可以根据答案从这里拿东西。

这是我的app.js文件中的代码：

App = Ember.Application.create();

//------------------------------------------------------------
// Hold the details of the logged-in user
//------------------------------------------------------------
App.LoggedInDetails = Ember.Object.create({
    Fullname: null,
    CompanyName: null,
    TokenID: null,

    setDetails: function(fullname, companyname, tokenid)
    {
        this.Fullname = fullname;
        this.CompanyName = companyname;
        this.TokenID = tokenid;
    },

    clearDetails: function()
    {
        this.Fullname = null;
        this.CompanyName = null;
        this.TokenID = null;
    }
});

//------------------------------------------------------------
App.ApplicationView = Ember.View.extend({
    templateName: 'logged-out'
});

App.ApplicationController = Ember.Controller.extend({
    isError: false,
    errorMessage: null,

    authenticate: function()
    {
        var email = this.get('email');
        var password = this.get('password');

        var url = 'https://api.example.com/security/authenticateUser.json';

        $.ajax({
           url: url,
           type: 'POST',
           dataType:'json',
           data: {email: email, passwd: password},
           crossDomain: true,
           context: this,
           success: this.authenticateCompleted
        });

        console.log('Url: ' + url);
    },

    authenticateCompleted: function(data)
    {
        // Login was a success!
        if(data.status === 'OK')
        {
            console.log('status: ' + data.status);
            console.log('fullName: ' + data.fullName);
            console.log('tokenId: ' + data.tokenId);
            console.log('companyName: ' + data.companyName);

            // Populate the LoggedInDetails object
            App.LoggedInDetails.setDetails(data.fullName, data.companyName, data.tokenId);

            this.set('isError', false);
        }
        else
        {
            App.LoggedInDetails.clearDetails();
            this.set('errorMessage', 'Invalid Email/Password Combination');
            this.set('isError', true);

            console.log(data.status);
            console.log(data.description);
        }
    }
});

//------------------------------------------------------------
App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet({
                    viewClass: App.ApplicationView,
                    controller: router.get('applicationController')
                });
            }
        })
    })
});

//------------------------------------------------------------
App.LoggedInView = Ember.View.extend({
    templateName: 'logged-in'
});

App.LoggedInController = Ember.Controller.extend({
    Fullname: App.LoggedInDetails.get("Fullname")
});

//------------------------------------------------------------

App.initialize();

我的问题源于从“已注销”默认视图切换到“已登录”视图，这是我应用程序的实际用户界面。

非常感谢您的帮助。

Answer 1

最简单的方法：向isLoggedIn添加ApplicationController属性，并在用户进行身份验证时将其设置为true。让ApplicationView呈现一个模板，使用{{#if isLoggedIn}} ... {{else}} ... {{/if}}在登录视图和未登录视图之间切换。

EmberJS的新功能，需要一些关于我的登录代码的帮助/建议

1 个答案: