Требование:
Вы должны подписаться на эти сообщения, прежде чем продолжить ..
Часть 1: Ссылка 1
Часть 2: Ссылка 2
Что такое локальное хранилище?
В его локальной памяти в браузере хранятся данные с неограниченным сроком действия…
Так что сэкономить ..
localStorage.setItem («Имя», «Хамза»);
Чтобы получить значение ..
localStorage.getItem («Имя пользователя»);
В нашем примере ответ, который возвращается из приложения Node:
{«PassNumber»: »1234321,« username »:« HamzaSalem »,« holderName »:« Hamza Salem »,« isuser »:« True »}
Поэтому мы сохраним «passNumber» и «isuser» и проверим значения при входе в компонент входа в систему…
Давайте начнем…
Сначала давайте сохраним его в локальном хранилище ... нам нужно добавить эти строки в my-login.js в функцию handleResponse следующим образом:
if (data.detail .__ data.xhr.response.isuser == ’True’) {
localStorage.setItem («номер прохода», data.detail .__ data.xhr.response.passNumber);
localStorage.setItem («isuser», data.detail .__ data.xhr.response.isuser);
this.set («route.path», «view1»);
}еще{
localStorage.setItem («isuser», data.detail .__ data.xhr.response.isuser);
alert («У вас неправильные имя пользователя и пароль ..»)}
теперь при успешном входе в систему (passNumber, isuser) будут возвращены значения, а в нашем примере это (1234321, True)…
Теперь нам нужно отредактировать функцию для автоматического перенаправления, внутри ready () добавьте это:
if (localStorage.getItem («isuser») == ’True’) {
this.set (‘route.path’, ‘view1’);
console.log («ввод»);
};
Теперь каждый раз, когда вы заходите на страницу входа в систему, приложение будет проверять значение, если оно истинно, и перенаправит вас на главную страницу view1.
А теперь мы хотим убедиться, что passNumber тоже сохранен, поэтому внутри my-view1.js мы добавим этот код:
готов(){
super.ready ();
console.log («Просмотр1»);
this.passNumber = localStorage.getItem («номер прохода»);
console.log (this.passNumber);
}
static get properties () {
возвращение {
passNumber: {
тип: String
}
}
}
А в html просто добавьте
‹H1› Просмотр One PassNumber: {{passNumber}} ‹/h1›
И попробуйте снова войти в систему с нуля, чтобы убедиться, что вы должны получить следующее:
И попробуйте войти с URL-адреса следующим образом: http://127.0.0.1:8081/login вы будете перенаправлены на страницу view1.
Хорошо, теперь мы хотим реализовать функцию выхода из системы…
Внутри my-app.js мы добавим такую кнопку:
Итак, после ‹/iron-selector› добавьте этот код для кнопки:
‹Бумажная кнопка поднимается при нажатии =" выход из системы "класс =" индиго "стиль =" фон: красный; цвет: #fff; ширина: 80% "› Выход ‹/paper-button›
Теперь нам нужно добавить эти функции внутри компонента:
конструктор () {супер ();}
ready () {super.ready ();}
static get properties () {
возвращение {
выйти: {
тип: Функция
}}}
выйти(){
alert («Ложь»);
localStorage.setItem («isuser», «False»);
this.set («route.path», «логин»);
}
И нам нужно добавить это в HTML:
‹App-location route =” {{route}} ”› ‹/app-location›
‹App-route route =” {{route}} ”pattern =” /: view ”data =” {{routeData}} ”tail =” {{subroute}} ”› ‹/app-route›
И не забудьте импортировать библиотеку зависимостей:
импортировать «@ полимер / app-route / app-location.js»;
импортировать «@ polymer / app-route / app-route.js»;
импортировать «@ polymer / paper-button / paper-button.js»;
Теперь вы готовы протестировать кнопку выхода…
Он должен перенаправить вас на страницу входа в систему следующим образом:
Отлично… у вас это получилось. Однако, если вы перейдете по ссылке http://127.0.0.1:8081/view1, вы войдете без входа, и это уязвимость в приложении ... поэтому мы должны проверить, вошли ли вы в систему так что вы добавите этот код в my-app.js внутри функции ready ():
if (localStorage.getItem («isuser») == ’True’) {
this.set («route.path», «view1»);
}еще{
this.set («route.path», «логин»);
}
Этот код перенаправит вас для входа в систему, если вы не вошли в систему….
GoodLuck Bross
Полный код: https://github.com/enghamzasalem/polymer-3-starter-kit-with-login-using-node-js
