Добрый день!
Прошу помощи т.к. "сломал" уже всю голову. Чувствую, что проблема не понимании механизма работы (перечитал уже куче сатей и форумов). Только начал осваивать AngularJS.
Суть вопроса:
Стандартная схема AngularJS + Firebase. Необходимо реализовать механизм авторизации, после которого пользователь попадает на страницу приложения. Если пользователь уже авторизован то сразу перенаправить его на главную страницу. Также необходимо скрывать элементы меню в зависимости от состояния авторизации.
Пытаюсь использовать модуль ui-router.
Делаю так:
HTML:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-$route-service-production</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="routerApp">
<!-- NAVIGATION -->
<div class="container ng-controller="CheckCtrl" ">
<section >
<nav class="navbar navbar-inverse" role="navigation" >
<div class="navbar-header" >
<a class="navbar-brand" ui-sref="#RouteAngularUI Еуr + {{loginState}}</a>
</div>
<ul class="nav navbar-nav" >
<li><a ng-show="loginState" ui-sref="home">Home</a></li>
<li><a ng-show="!loginState" ui-sref="login">Login</a></li>
<li><a ng-show="loginState" ui-sref="logout">Logout</a></li>
<li><a ui-sref="auth">Auth</a></li>
<li><a ui-sref="check">Check</a></li>
</ul>
</nav>
</section>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</div>
</body>
</html>
app.jsvar config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxxxxxxxxxxx.firebaseio.com",
storageBucket: "xxxxxxxxxxxxxxxx.appspot.com"
};
var ref=firebase.initializeApp(config);
var loginState;
var routerApp = angular.module('routerApp', ['ui.router','firebase']);
//-----------------------check isSigned--------------------------------
routerApp.factory('authFactory',function(){
console.log("authFactory created");
var authFactory={};
var isAuthed;
authFactory.isLogin=function(){ ref.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
isAuthed =true;
} else {
// No user is signed in.
isAuthed =true;
}
console.log(isAuthed)
});
loginState=isAuthed;
return isAuthed;
}
return authFactory;
});
//-----------------------check isSigned--------------------------------
routerApp.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'home/partial-home.html',
controller: 'HomeCtrl'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('logout', {
url: '/logout',
templateUrl: 'home/logout.html',
controller: 'LogoutCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'home/auth-page.html',
controller: 'LoginCtrl'
})
.state('auth', {
url: '/auth',
templateUrl: 'home/login.html',
controller: 'AuthCtrl'
})
.state('check', {
url: '/check',
templateUrl: 'home/login.html',
controller: 'CheckCtrl'
});
});
routerApp.controller('LogoutCtrl',['$state',function($state){
console.log('in LogoutCtrl');
ref.auth().signOut().then(function() {
console.log('logout');
$state.go('login');
// Sign-out successful.
}, function(error) {
// An error happened.
console.log('logout error');
});
}]);
routerApp.controller('AuthCtrl',['$scope','$location','$firebaseAuth','$firebaseObject',function($scope,$location,$firebaseAuth,$firebaseObject) {
var a=ref.auth();
$scope.SignIn = function() {
var username = "someuser@somedomain.ru";
var password = "somepassword";
a.signInWithEmailAndPassword(
username,
password
)
.then(function(user) {
// Success callback
console.log('Authentication successful');
$location.path("/home");
}, function(error) {
// Failure callback
console.log("error: " + error);
});
}
console.log(' in AuthCtrl');
}]);
routerApp.controller('LoginCtrl',['$scope','$http',function($scope,$http){
console.log('In LoginCtrl');
//console.log($scope);
$scope.auth = ref;
$scope.login = function() {
console.log($scope.email+""+$scope.password);
$scope.auth.auth().signInWithEmailAndPassword($scope.email, $scope.password).then(function () {
console.log("Authenticated successfully with provider with payload:");
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);
})
};
}]);
В сети куча примеров с использованием $firebaseAuth - но использовать его не получилось т.к. ругается на версию SDK.
Проблема именно в проверке авторизован ли пользователь (после загрузки страницы) или нет, в скрытии элементов меню.
Понимаю, что скорее всего мой код вообще не правильный, но уже запутался окончательно.
Прошу направить в нужное "русло". Спасибо!
Средний
Средний