Добавление авторизации к проекту ExtJS

На серверной стороне реализована простейшая авторизация, которая в ответ на логин и пароль присылает токен авторизации. В данной статье будет описан механизм работы с токеном на клиентской стороне.

Чтобы включить функционал авторизации требуется в config.json указать следующий параметры:

    ***
    "auth": {
        "enable":true, // (1) позволяет включить авторизацию 
        "loginUrl": "http://{0}/auth/" // (2) указывается путь к адресу для прохождения авторизации
    }
    ***
  • (1) - true - на сайте требуется произвести авторизацию, fasle - авторизация отключена
  • (2) - url-адрес для прохождения авторизации, где {0} - базовый адрес сервера

Реализация

Для начала нам требуется "нарисовать" нашу форму, которая будет отправлять данные на сервер.

Ext.define('ImportSubstitution.view.account.Login', {
    extend: 'Ext.Window',
    closable: false,
    modal: true,
    resizable: false,

    title: 'Авторизация',

    items: [
        {
            xtype: 'itloginform',
            layout: 'fit',
            width: '100%',
            height: '100%',
            listeners: {
                /*
                 * требуется прокинуть результат авторизации вверх
                 */
                authresult: function (singin, message) {
                    this.up('window').fireEvent('authresult', singin, message);
                }
            }
        }
    ]
});

Здесь создается модальное окно, которое содержит форму itloginform. Кстати событие authresult специально пробрасывается на уровень окна. Дело в том что обработчик в It.app.Application реагирует именно на это

/*
     * инициализация формы авторизации
     */
    initLoginView: function () {
        var me = this;
        var win = Ext.create(this.authConfig.viewName, {
            listeners: {
                authresult: function (singin, message) {
                    if (singin == true) {
                        if (me.getWorkAuth() == true) {
                            win.destroy();
                        } else {
                            window.location.href = '';
                        }
                    }
                    else
                        Ext.Error.raise(message);
                }
            }
        });
        win.show();
    },

Далее в файле app.js требуется указать следующие настройки

Ext.application({
    name: 'ImportSubstitution',

    extend: 'ImportSubstitution.Application',

    requires: [
        'ImportSubstitution.view.main.Main',
        'ImportSubstitution.view.account.Login' // (1) требуется предварительная загрузка 
    ],

    itauthConfig: { // настройки для формы авторизации
        viewName: 'ImportSubstitution.view.account.Login' // (2) имя view для вывода окна авторизации
    },

    mainView: 'ImportSubstitution.view.main.Main'
});

  • (1) - требуется указать представление, которое будут отрисовывать форму авторизации
  • (2) - специальная настройка, которая позволяет настраивать механизм авторизации

Для хранение данных об авторизации система использует localstorage. 

  • isAuthorize:boolean - переменная для хранения информации авторизован пользователь или нет
  • login:string - логин пользователя
  • rememberMe:boolean - переменная для хранения информации "запомнить меня"
  • token:string - токен авторизации
  • token-date:Date - дата создания токена, пока временно не используется 

Как реализован механизм передачи информации об авторизации на сервер?

Механизм реализован простой передачей заголовка http Authorization. В данном заголовке передается токен авторизации.

    /* при ajax-запросе добавляет в header данные об авторизации
    *  @param value - значения
    */
    setAuthrizeHeader: function (value) {
        (Ext).Ajax.setDefaultHeaders({
            "Authorization": "Token " + value // (1)
        });
    },
  • (1) - передача Token + строка - это особенность реализации авторизации в NanсyFX (серверный клиент реализован именно на ней)

Для проброса авторизации для файлов js, в url'e каждого файла добавлен параметр access_token, в котором указывается токен авторизации

Нет комментариев

Добавить комментарий