angularjs - angularfireauth documentation
¿Cómo manejar los estados cuando se inicia sesión(Ionic, Firebase, AngularJS)? (3)
Estoy creando una aplicación en Ionic y he comenzado a profundizar en el método de autenticación Firebase. Hasta ahora he logrado configurar correctamente un inicio de sesión a través de Twitter (puedo iniciar sesión y cerrar sesión).
Sin embargo, ¿cómo configuro los estados del marco iónico de modo que solo se muestren estados específicos (y, por lo tanto, páginas) cuando se inicia sesión y otros cuando se desconecta? El código que tengo hasta ahora se muestra a continuación.
Idealmente tendría algo como una variable:
AuthRequired: true
¿Cómo haces esto y cómo se llama?
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// ''starter'' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of ''requires''
// ''starter.services'' is found in services.js
// ''starter.controllers'' is found in controllers.js
angular.module(''starter'', [''ionic'', ''ngCordova'', ''firebase'', ''firebase.utils'', ''starter.controllers'', ''starter.services'', ''starter.config'', ''starter.auth''])
.run(function($ionicPlatform, Auth, $rootScope) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
//stateChange event
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authRequired && !Auth.isAuthenticated()){ //Assuming the AuthService holds authentication logic
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state''s controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state(''tab'', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state(''tab.dash'', {
url: ''/dash'',
views: {
''tab-dash'': {
templateUrl: ''templates/tab-dash.html'',
controller: ''DashCtrl'',
authRequired: true
},
}
})
.state(''tab.chats'', {
url: ''/chats'',
views: {
''tab-chats'': {
templateUrl: ''templates/tab-chats.html'',
controller: ''ChatsCtrl'',
authRequired: true
}
}
})
.state(''tab.chat-detail'', {
url: ''/chats/:chatId'',
views: {
''tab-chats'': {
templateUrl: ''templates/chat-detail.html'',
controller: ''ChatDetailCtrl'',
authRequired: true
}
}
})
.state(''tab.friends'', {
url: ''/friends'',
views: {
''tab-friends'': {
templateUrl: ''templates/tab-friends.html'',
controller: ''FriendsCtrl'',
authRequired: true
}
}
})
.state(''tab.friend-detail'', {
url: ''/friend/:friendId'',
views: {
''tab-friends'': {
templateUrl: ''templates/friend-detail.html'',
controller: ''FriendDetailCtrl'',
authRequired: true
}
}
})
.state(''tab.account'', {
url: ''/account'',
views: {
''tab-account'': {
templateUrl: ''templates/tab-account.html'',
controller: ''AccountCtrl'',
authRequired: true
}
}
})
.state(''tab.example'', {
url: ''/example'',
views: {
''tab-example'': {
templateUrl: ''templates/tab-example.html'',
controller: ''ExampleCtrl'',
authRequired: true
}
}
})
.state(''tab.overview'', {
url: ''/overview'',
views: {
''tab-overview'': {
templateUrl: ''templates/tab-overview.html'',
controller: ''OverviewCtrl'',
authRequired: true
}
}
})
.state(''tab.login'', {
url: ''/login'',
views: {
''tab-login'': {
templateUrl: ''templates/tab-login.html'',
controller: ''LoginCtrl'',
authRequired: true
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(''/tab/dash'');
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- firebase and simple login -->
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app''s js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you''d like).
-->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>
</html>
Para tener éxito lea el valor usando:
toState.authRequired
Mueva authRequired: true dentro de .state lugar de views .
Tuve el mismo problema que el tuyo! ¡Echa un vistazo a cómo lo resolví!
app.js
angular.module(''app'', [''ionic'',''firebase'', ''app.controllers'', ''app.routes'', ''app.directives'',''app.services'',''app.filters'',])
.run(function($ionicPlatform, $rootScope, $state) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {//
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
//stateChange event
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
var user = firebase.auth().currentUser;
if (toState.authRequired && !user){ //Assuming the AuthService holds authentication logic
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
// Initialize Firebase Here
})
rutas.js
angular.module(''app.routes'', [''ionicUIRouter''])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(''login'', {
url: ''/login'',
templateUrl: ''templates/login.html'',
controller: ''loginCtrl''
})
.state(''menu'', {
url: ''/menu'',
templateUrl: ''templates/menu.html'',
abstract:true,
controller: ''menuCtrl''
})
.state(''menu.dash'', {
url: ''/contas'',
templateUrl: ''templates/dash.html'',
controller: ''contasCtrl'',
authRequired: true
})
$urlRouterProvider.otherwise(''/login'')
});
Ya casi has llegado. Todo lo que necesita es asegurarse de que sus estados estén marcados apropiadamente con la propiedad personalizada ''AuthRequired'' y escuchar el evento $ stateChangeStart para verificar la autenticación. Este evento se activa cada vez que te mueves con la aplicación.
.run(function($ionicPlatform, AuthService) {
//ionic init code
//stateChange event
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authRequired && !AuthService.isAuthenticated()){ //Assuming the AuthService holds authentication logic
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
}
.state(''tab.dash'', {
url: ''/dash'',
views: {
''tab-dash'': {
templateUrl: ''templates/tab-dash.html'',
controller: ''DashCtrl'',
authRequired: true
}
}
})
.state(''tab.chats'', {
url: ''/chats'',
views: {
''tab-chats'': {
templateUrl: ''templates/tab-chats.html'',
controller: ''ChatsCtrl'',
authRequired: true
}
}
})
El mejor lugar para tener el controlador de eventos $ stateChangeStart sería ejecutar la aplicación.