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

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

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

来源

2017-04-12 kritika verma

你正在做错误的控制器支票routechange事件。这样做：

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

我认为这是一个更好的方式来实现你想要的...... resolve执行之前，您welcome变得活跃......所以，你避免加载welcome页面，然后才重定向如果用户没有在

PS记录：（或许缺少一些分号在我的代码，但你可以处理这个问题）

来源

2017-04-12 13:34:03

谢谢你的工作:) –

但是这种方法有一个问题，当我注销时，它会将我重定向到login.html页面，没关系，但是如果我改变了这个URL - > http： // localhost/login /＃/欢迎再次将我带到欢迎页面，这是不正确的，如果在注销后到达登录页面时刷新页面，那么它不会返回welcome.html，仅当我刷新页面时！我希望你有我的查询！ –

仅当您登录页面加载时创建'$ rooteScope.loggedIn'，它可能没有此变量直接访问欢迎页面，这可能是此错误的原因。使用'console.log（$ rooteScope.loggedIn）'来查看这个变量有哪些值，然后检查这个也是重定向的。 –

在你welcomeController，你需要检查用户是否登录。

尝试以下操作：

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

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

来源

2017-04-12 12:35:24 pranavjindal999

-1

您可以使用

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

    }   
});

}）

来源

2017-04-12 12:41:12

任何路线变化将其移到登录 – pranavjindal999

你必须检查与登录变量为真或如果它根据您的变量为false，则将其重定向到登录 if（！$ rootScope.loggedIn）{ //不会去#login，我们现在应该重定向 $ location.path（“/ login”）; } –

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

回答

相关问题