В предыдущей части этого руководства мы добавили индикатор загрузки Ladda в наше приложение, чтобы сделать его более интерактивным. Мы также увидели, как фильтровать результаты данных при извлечении данных из firebase. В этой части руководства мы добавим функцию выхода из системы и исправим несколько проблем.
Начиная
Давайте начнем с клонирования предыдущей части руководства от GitHub .
|
1
|
git clone https://github.com/jay3dec/AngularJS_Firebase_Part7.git
|
После клонирования исходного кода перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd AngularJS_Firebase_Part7
npm install
|
Как только зависимости установлены, запустите сервер.
|
1
|
npm start
|
Укажите в браузере http: // localhost: 8000 / app / # / home, и приложение должно быть запущено.
Реализация функции выхода из системы
Добавление кнопки выхода
Мы начнем с добавления кнопки выхода в представления addPost.html и addPost.html . Откройте обе страницы и добавьте новый тег привязки к элементу nav.
|
1
2
3
4
5
|
<nav class=»blog-nav»>
<a class=»blog-nav-item » href=»#/welcome»>Home</a>
<a class=»blog-nav-item active» href=»#/addPost»>Add Post</a>
<a class=»blog-nav-item » style=»cursor:pointer;»
</nav>
|
Реализация выхода
Когда мы хотим выйти из системы конкретного пользователя, мы можем вызвать API $unauth . Мы создадим метод в нашем CommonProp AngularJS, чтобы он был доступен для всех контроллеров. Откройте home.js и измените сервис CommonProp в него новую функцию logoutUser .
|
1
2
3
|
logoutUser:function(){
// logout the user
}
|
Теперь внутри функции logoutUser используйте loginObj чтобы выполнить $unauth API $unauth и перенаправить на домашнюю страницу. Вот модифицированный сервис CommonProp .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
.service(‘CommonProp’,[‘$location’,’$firebaseAuth’,function($location,$firebaseAuth) {
var user = »;
var firebaseObj = new Firebase(«https://blistering-heat-2473.firebaseio.com»);
var loginObj = $firebaseAuth(firebaseObj);
return {
getUser: function() {
return user;
},
setUser: function(value) {
user = value;
},
logoutUser:function(){
loginObj.$unauth();
console.log(‘done logout’);
$location.path(‘/home’);
}
};
}])
|
В AddPostCtrl и WelcomeCtrl добавьте функцию с именем logout которая вызовет выход из службы CommonProp .
|
1
2
3
|
$scope.logout = function(){
CommonProp.logoutUser();
}
|
Сохраните вышеуказанные изменения и войдите в систему, используя действующий адрес электронной почты и пароль. После входа в систему вы сможете увидеть ссылку « Выход из системы» в верхнем меню. Нажав на ссылку Выход из системы, вы выйдете из приложения.
Ведение данных страницы при обновлении
До сих пор все выглядит хорошо и работает хорошо. Но после того, как вы вошли в приложение, при попытке обновить страницу все испортилось. Итак, нам нужно найти способ сохранить данные страницы. Мы будем использовать локальное хранилище HTML 5 для поддержки важных данных.
Как только пользователь успешно вошел в систему, мы сохраним адрес электронной почты в локальном хранилище. Измените функцию CommonProp службе CommonProp чтобы сохранить адрес электронной почты пользователя в локальном хранилище.
|
1
2
3
4
|
setUser: function(value) {
localStorage.setItem(«userEmail», value);
user = value;
}
|
Теперь, получая адрес электронной почты пользователя из службы CommonProp , он CommonProp адрес электронной почты из локального хранилища и вернет его.
|
1
2
3
4
5
6
|
getUser: function() {
if(user == »){
user = localStorage.getItem(‘userEmail’);
}
return user;
}
|
Также обязательно удалите данные локального хранилища и пользовательскую переменную из службы CommonProp когда пользователь выходит из системы.
|
1
2
3
4
5
6
|
logoutUser:function(){
loginObj.$unauth();
user=»;
localStorage.removeItem(‘userEmail’);
$location.path(‘/home’);
}
|
Сохраните вышеуказанные изменения и войдите в систему, используя действующий адрес электронной почты и пароль. После входа попробуйте обновить страницу, и страница должна работать как положено.
Предотвращение несанкционированного доступа к странице
Прямо сейчас пользователи могут получить доступ ко всем страницам, независимо от того, вошли они в систему или нет. Чтобы предотвратить несанкционированный доступ, мы проверим сеанс пользователя.
В контроллере WelcomeCtrl добавьте следующий код, чтобы получить текущего вошедшего в систему пользователя. Если пользователь не существует, перенаправьте его на домашнюю страницу.
|
1
2
3
4
5
|
$scope.username = CommonProp.getUser();
if(!$scope.username){
$location.path(‘/home’);
}
|
Аналогичным образом добавьте следующую проверку кода в контроллер AddPostCtrl .
|
1
2
3
|
if(!CommonProp.getUser()){
$location.path(‘/home’);
}
|
Сохраните вышеуказанные изменения и попробуйте загрузить страницу приветствия или страницу добавления сообщения без входа в систему, после чего вы будете перенаправлены на страницу входа.
Автоматический вход пользователя на действительный сеанс
Мы добавим еще одну функцию для автоматического входа пользователя на странице входа. Мы будем использовать API $onAuth который будет прослушивать изменения в состоянии аутентификации. Когда пользователь загружает страницу входа и состояние проверки подлинности происходит из-за допустимого сеанса, $onAuth . Добавьте $onAuth API $onAuth в контроллер HomeCtrl .
|
1
2
3
4
5
|
loginObj.$onAuth(function(authData) {
//fire when authentication state occurs
});
|
Если authData не является нулевым в возвращенном обратном вызове, то это допустимый сеанс. Итак, добавьте код, чтобы сохранить данные пользователя в сервисе CommonProp и перенаправить на страницу приветствия.
|
1
2
3
4
5
6
|
loginObj.$onAuth(function(authData) {
if(authData){
CommonProp.setUser(authData.password.email);
$location.path(‘/welcome’);
}
});
|
Сохраните вышеуказанные изменения и войдите в приложение. После входа закройте приложение, не выходя из системы. Теперь попробуйте загрузить страницу входа, и вы автоматически войдете в приложение.
Завершение
В этой части серии мы реализовали функцию выхода из системы, а также решили некоторые проблемы, такие как предотвращение несанкционированного доступа пользователей и сохранение данных при обновлении страницы.
В следующих уроках я постараюсь реализовать несколько функций, запрошенных пользователями. Я приветствую любые пожелания, которые вы хотели бы, чтобы я выполнил.
Следите за предстоящим уроком, проверив мою страницу инструктора . Он включает в себя все учебные пособия, как только они опубликованы.
Дайте нам знать ваши мысли, предложения и исправления в комментариях ниже. Исходный код из этого урока доступен на GitHub .