0

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

它使用 ajax 很好地进行了身份验证，我可以在开发控制台中看到一切运行良好。

在我继续之前，我首先想了解人们对我迄今为止编写的 ember 代码的看法，以及它是否符合 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();

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

非常感谢您的帮助。

4

1 回答 1

1

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

于 2013-01-01T14:41:21.413 回答