17
Tôi đang xây dựng một ứng dụng trong Ionic và đã bắt đầu tìm hiểu phương pháp xác thực Firebase. Cho đến nay tôi đã quản lý để thiết lập một đăng nhập thông qua Twitter đúng cách (tôi có thể đăng nhập và đăng xuất).Làm cách nào để xử lý các trạng thái khi đăng nhập (Ionic, Firebase, AngularJS)?
Tuy nhiên, làm thế nào để thiết lập trạng thái của khuôn khổ ion như vậy mà chỉ các quốc gia cụ thể (và do đó trang) được hiển thị khi đăng nhập và những người khác khi đăng xuất khỏi? Mã tôi có cho đến nay được hiển thị dưới đây.
Lý tưởng nhất là tôi sẽ có một cái gì đó giống như một biến:
AuthRequired: true
Làm thế nào để bạn làm điều này và những gì nó được gọi là?
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>
Bạn có sử dụng router ui hoặc ngRouter chính thức? Đối với bản thân mình, tôi sử dụng bộ định tuyến ui và ở mỗi trạng thái, tôi có thể lưu dữ liệu tùy chỉnh như boolean có tên "công khai", quyết định xem trạng thái tương ứng có cần xác thực hay không. Tôi có thể cung cấp cho bạn thông tin chi tiết hơn nếu bạn muốn một cái gì đó như thế. –
Xin chào Himmet. Thành thật mà nói tôi không biết, tôi nghĩ rằng một tiêu chuẩn đi kèm với Ionic Framework. Có xin vui lòng chia sẻ phương pháp của bạn! – AMG
Tôi có thể nhận được câu trả lời được chấp nhận để hoạt động. Một sự khác biệt trong mã của tôi là tôi có 'authRequired' làm tài sản của tiểu bang và không được lồng trong khung nhìn của tiểu bang. Nếu không, nó nhìn với tôi rằng bạn cần phải sửa đổi 'toState.authRequire' để kiểm tra bên trong của toState.view – liampronan