我通过身份验证进行了以下路由,这是通过PHP脚本和MySQL完成的:
的app.config
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'partials/login.html',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'partials/login.html',
controller: 'logoutCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: 'partials/dashboard.html',
controller: 'authCtrl'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
authCtrl
app.controller('authCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) {
$scope.login = {};
$scope.signup = {};
$scope.doLogin = function (customer) {
Data.post('login', {
customer: customer
}).then(function (results) {
Data.toast(results);
if (results.status == "success") {
$location.path('dashboard');
}
});
};
$scope.logout = function () {
Data.get('logout').then(function (results) {
Data.toast(results);
$location.path('login');
});
}
});
现在我想根据登录状态更改导航。如果用户已登录,则应该有一个logOUT-Button和一个指向仪表板的链接。如果用户未登录,则应该如下所示
未登记用户的样本
<header id="navigation">
<nav id="main">
<ul>
<li id="login"><a href="#/login" class="btn"><i class="fa fa-power-off"></i> Login</a></li>
</ul>
</nav>
</header>
<main ng-view>
Content goes here
</main>
创建导航的最佳方式是什么?它应该是一个单独的模板吗?
答案 0 :(得分:0)
当事情变得复杂时,我宁愿使用ui-router或者角度新的路由器(还没有尝试过这个),因为它们支持同一页面中的多个视图。因此nav成为它自己的视图,内容自己的视图等。为了在视图之间进行通信,我将使用消息传递$rootScope
中的数据或某种共享状态服务。
这样的事情......在开始时,登录共享状态设置为已注销。作为登录功能的最后一部分,我将设置登录共享状态并将其设置为登录。就像我说的,我宁愿把它作为一个共享的状态服务调用,因为我可以让它$rootScope.$broadcast
某种 onLoginStateChange 并在那里传递新的值。
然后我设置导航视图以使用$scope.$on
监听此 onLoginStateChange 并在其控制器中设置其内部视图模型状态并将其绑定到ng-if
指令因此,如果错误,则会显示登录;如果 true (已登录),则会显示退出。