Question

这是我的主要js文件，我想要一个条件，用户必须登录才能访问欢迎页面，如果用户没有登录，那么它必须默认将其重定向到登录页面，但在我的代码中表格正在提交并重定向到欢迎页面，但没有实现所需的结果。

这是main.js文件

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('/');
                      }

这是我的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>

和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

在welcomeController中，您需要检查用户是否已登录。

请尝试以下操作：

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

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

Answer 2

您正在检查错误的控制器。这样做：

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

我认为这是实现您想要的更好方式... resolve在welcome变为活动之前执行...因此，您无法加载welcome页面只有在用户未登录时才重定向

p.s。:(可能在我的代码中缺少一些分号，但你可以处理这个）

Answer 3

您可以使用routechange事件

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" );

  }         
});

}）

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

3 个答案: