My current project involves implementing token-based authentication using the MEAN stack. The goal of my application is to display different menu items based on whether a user is logged in or not. When there is no token present, the menu should show options for Home, Signin, and Signup. Once a user is logged in and a token is generated, the menu should update to show Home, Me, and Logout. While the server-side functionality for Signin, Signup, and Logout is functioning correctly with proper URL redirection and view rendering, I am facing an issue with the dynamic updating of the Menu items. The menu only refreshes when I manually trigger a page refresh. I am seeking assistance in resolving this issue.
Below are snippets from my Index.html file (Includes omitted for brevity):
<body ng-app="app">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" data-ng-controller="authCtrl">
<!-- data-ng-controller="authCtrl" -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">Angular Restful Auth</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ng-href="#/">Home</a></li>
<li data-ng-show="token"><a ng-href="#/me">Me</a></li>
<li data-ng-hide="token"><a ng-href="#/login">Signin</a></li>
<li data-ng-hide="token"><a ng-href="#/register">Signup</a></li>
<li data-ng-show="token"><a ng-click="logout()">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" ng-view="">
</div> <!-- /container -->
</body>
The accompanying app.js script contains the configuration details:
'use strict';
var app = angular.module('app', ['ngRoute', 'authControllers', 'authServices']);
var authControllers = angular.module('authControllers', []);
var authServices = angular.module('authServices', []);
var options = {};
options.api = {};
//dev URL
options.api.base_url = "http://localhost:3000";
app.config(['$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'authCtrl'
}).
when('/login', {
templateUrl: 'partials/signin.html',
controller: 'authCtrl'
}).
when('/register', {
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
}).
when('/me', {
templateUrl: 'partials/me.html',
controller: 'authCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
}]);
app.run(function($rootScope, $location, $window, AuthenticationService) {
$rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
//redirect only if both isAuthenticated is false and no token is set
if (nextRoute != null && nextRoute.access != null && nextRoute.access.requiredAuthentication
&& !AuthenticationService.isAuthenticated && !$window.sessionStorage.token) {
$location.path("/login");
}
});
});
Lastly, the authControllers.js file includes the necessary controller functions:
authControllers.controller('authCtrl', ['$scope', '$location', '$window', 'UserService', 'AuthenticationService',
function authCtrl($scope, $location, $window, UserService, AuthenticationService) {
//Admin User Controller (login, logout)
$scope.logIn = function logIn(username, password) {
if (username !== undefined && password !== undefined) {
UserService.logIn(username, password).success(function(data) {
AuthenticationService.isLogged = true;
$window.sessionStorage.token = data.token;
$location.path("/me");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
}
$scope.token = $window.sessionStorage.token;
$scope.me = function() {
UserService.me(function(res) {
$scope.myDetails = res;
}, function() {
console.log('Failed to fetch details');
$rootScope.error = 'Failed to fetch details';
})
};
$scope.logout = function logout() {
if (AuthenticationService.isAuthenticated) {
UserService.logOut().success(function(data) {
AuthenticationService.isAuthenticated = false;
delete $window.sessionStorage.token;
$location.path("/");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
else {
$location.path("/login");
}
}
$scope.register = function register(username, password, passwordConfirm) {
if (AuthenticationService.isAuthenticated) {
$location.path("/me");
}
else {
UserService.register(username, password, passwordConfirm).success(function(data) {
$location.path("/login");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
}
}]);