Redirecting to a certain route based on condition

🚦 Redirecting to a certain route based on condition

Have you ever encountered a situation where you want to redirect users to a specific route based on a certain condition? It's a common scenario in web development, especially when dealing with user authentication and authorization. In this blog post, we'll discuss a specific problem related to redirecting in AngularJS and provide you with easy solutions to tackle it.

The Problem

Let's say you're building a small AngularJS app with a login view and a main view. You have set up your routes using the $routeProvider like this:

$routeProvider
 .when('/main', { templateUrl: 'partials/main.html',  controller: MainController })
 .when('/login', { templateUrl: 'partials/login.html', controller: LoginController })
 .otherwise({ redirectTo: '/login' });

Your LoginController checks the user/password combination and sets a property on the $rootScope to reflect the login status. Here's an example of how it might look:

function LoginController($scope, $location, $rootScope) {
  $scope.attemptLogin = function() {
    if ($scope.username == $scope.password) {
      $rootScope.loggedUser = $scope.username;
      $location.path("/main");
    } else {
      $scope.loginError = "Invalid user/pass.";
    }
  }
}

The login functionality works as expected. However, there's a potential security flaw. If a user were to manually access http://localhost/#/main without logging in, they would bypass the login screen and have unauthorized access to the main view. We need to find a way to redirect them back to the login screen in such cases.

The Solution

AngularJS provides a powerful feature called $rootScope.$on() that allows you to listen to route changes. We can utilize this feature alongside the $location service to implement our desired redirect logic.

First, let's modify our LoginController to listen for route changes:

function LoginController($scope, $rootScope, $location) {
  $scope.attemptLogin = function() {
    if ($scope.username == $scope.password) {
      $rootScope.loggedUser = $scope.username;
      $location.path("/main");
    } else {
      $scope.loginError = "Invalid user/pass.";
    }
  }

  $rootScope.$on('$routeChangeStart', function(event, next) {
    if (next.originalPath !== '/login' && !$rootScope.loggedUser) {
      $location.path('/login');
    }
  });
}

In the code above, we added a listener for the $routeChangeStart event using $rootScope.$on(). This event is triggered whenever a route change is about to occur. Inside the event handler, we check if the originalPath of the next route is not /login and if the user is not logged in ($rootScope.loggedUser is null). If these conditions are met, we redirect the user back to the login screen using $location.path().

With this implementation, whenever someone tries to access a protected route without logging in, they will be automatically redirected to the login screen, ensuring the security of your app.

Conclusion

Redirecting users based on certain conditions is a common requirement in web development, and AngularJS provides us with the tools to handle it effectively. By utilizing the $rootScope.$on() listener and the $location service, we can easily redirect users to the desired route when necessary.

Remember to always prioritize the security and usability of your app by implementing proper authentication and authorization mechanisms. 🔐

If you found this blog post helpful or have any questions or feedback, don't hesitate to leave a comment below. Happy coding! 😊