如果用户未登录，如何防止用户访问下一页？

Question

This is my main js file, where I want a condition that user must be logged in to access the welcome page, if user is not logged in then it must redirect it to login page by default, but in my code the form is submitting and redirecting to welcome page but does not implement desired result.

here is the main.js file

var app = angular.module("myApp", ["ngRoute"])

                    .config(function($routeProvider, $locationProvider) {
                        $locationProvider.hashPrefix('');
                        $routeProvider
                                .when("/",{
                                    templateUrl : "pages/login.html",
                                    controller : "loginController"
                                })
                                .when("/welcome",{
                                    templateUrl: "pages/welcome.html",
                                    controller:"welcomeController"
                                })

                            })
                .controller("loginController", function($scope, $location, $rootScope){
                            $scope.login = function() {
                                var user = $scope.username;
                                var password = $scope.password;
                                /*var result = $scope.username + $scope.password;
                                console.log(result);*/
                                if (user == "admin" && password == 'admin'){
                                    $rootScope.loggedIn = true;
                                    $location.path('/welcome');
                                } else {
                                    alert("INVALID CREDENTIALS");
                                }
                            }
                    })

                .controller('welcomeController', function($scope){
                    $scope.message = "welcome here";
                })
                .controller('logoutController', function($scope,$location){
                      $scope.logOut = function(){
                          $location.path('/');
                      }

And here is my welcome.html

<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias officia praesentium dolore alias, enim nostrum doloribus natus nisi itaque quos ullam. Tenetur aut fugit qui minus, cupiditate, rem est unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit facilis excepturi laboriosam voluptates in doloremque ad, impedit. Nam sunt similique vitae voluptatem fugit molestias, quod accusantium alias nulla dolores ad.</span>

<div class="logout">
    <h4><span style="float: right; color:red; cursor: pointer;" ng-click="logOut()">Logout?</span></h4>
</div>

and login.html here

Enter user name: <input type="text" name="user" ng-model="username"><br>
Enter Password: <input type="password" name="password" ng-model="password"><br>
<input type="submit" name="submit" value="submit" ng-click="login()">

Answer 1

In your welcomeController , you need to check if the user is logged in or not.

Try following:

.controller('welcomeController', function($scope, $rootScope, $location) {
    if (!$rootScope.loggedIn)
        $location.path('/');

    $scope.message = "welcome here";
});

Answer 2

You're doing your check in the wrong controller. do like this:

 .when("/welcome",{
                   templateUrl: "pages/welcome.html",
                   controller:"welcomeController",
                   resolve: {
                        userLoggedIn: function($rootScope, $location){
                              if(!$rooteScope.loggedIn){
                                   $location.path('/');
                               } 
                        }
                     }
                   })

I think this is a better way to achieve what you want... resolve execute before your welcome become active...so, you avoid to load the welcome page and only then redirect if the user is not logged in

ps: (maybe is missing some semicolon in my code but you can handle this)

Answer 3

You can use routechange event

angular.module(...).config( ['$routeProvider', function($routeProvider) {...}] ).run( function($rootScope, $location) {

// register listener to watch route changes
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  if ( $rootScope.loggedUser == null ) {
      // not going to #login, we should redirect now
      $location.path( "/login" );

  }         
});

})