wtw24

Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-Based Authentication

Preconditions:

В данной заметке рассматривается работа JWT с симметичным алгоритмом шифрования (HS256/HS384/HS512)

Основы:

Аутентификация(authentication, от греч. αὐθεντικός [authentikos] – реальный, подлинный; от αὐθέντης [authentes] – автор) - это процесс проверки учётных данных пользователя (логин/пароль). Проверка подлинности пользователя путём сравнения введённого им логина/пароля с логином/паролем, сохранённым в базе данных пользователей.

Авторизация(authorization — разрешение, уполномочивание) - это проверка прав пользователя на доступ к определенным ресурсам.

wtw24

// предваряющие точка с запятой предотвращают ошибки соединений
// с предыдущими скриптами, которые, возможно
// не были верно «закрыты».
;(function ( $, window, document, undefined ) {

    // т.к. undefined, по определению ECMAScript 3, не является константой
    // здесь мы явно задаем неопределенную переменную
    // убеждаясь в ее действительной неопределенности
    // В стандарте ES5, undefined уже точно константа

wtw24

// предваряющие точка с запятой предотвращают ошибки соединений
// с предыдущими скриптами, которые, возможно
// не были верно «закрыты».
;(function ( $, window, document, undefined ) {

    // можно определять неймспейс плагина, 
    // со своими параметрами, к примеру
    // $.widget( "namespace.widgetname", (optional)) - наследуемый
    // прототип виджета, и прототипирование нового виджета 

wtw24

;(function ( $ ) {
    if (!$.myNamespace) {
        $.myNamespace = {};
    }

    $.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
        // Для предотвращения конфликтов контекста
	// используем 'base' вместо 'this'
        // для дальнейших обращений к объекту из методов и событий
        var base = this;

wtw24

// В этом паттерне используем события jQuery
// для обеспечения возможностей pub/sub (publish/subscribe).
// Каждый виджет будет порождать и подписываться на разные события
// Данный подход позволит разграничить виджеты, 
// обеспечивая их независимое существование
;(function ( $, window, document, undefined ) {
    $.widget("ao.eventStatus", {
        options: {

        },

wtw24

// myObject – объект реализуемой модели (например, машина)
var myObject = {
  init: function( options, elem ) {
    // объединяем входные параметры с дифолтными
    this.options = $.extend( {}, this.options, options );

    // Сохраняем указатели на элементы
    this.elem  = elem;
    this.$elem = $(elem);

wtw24

// конструктор объекта "widgetName"
// обязательны следующие аргументы
// options: объект опций плагина
// element: DOM элемент плагина
var widgetName = function( options, element ){
  this.name = "myWidgetName";
  this.options = options;
  this.element = element;
  this._init();
}

wtw24

<?php

class RowIterator
{
    const STOP = 'stop_iteration';


    private $db;

    private $sqlQuery;

wtw24

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
    var cssHref = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
    var needLocalCss = true;

    for (var i = 0; i < document.styleSheets.length; i++) {

wtw24

## Тогл(переключение между двумя состояниями) CSS классов

//*.html
<div id="app">
  <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Затогли меня</button>
  <p :class="{ red: active }">Иногда мне нужно быть иначе стилизованным</p>
</div>
//*.js
new Vue({
  el: '#app',