如果用戶未登錄，如何阻止用戶訪問下一頁？

這是我的主要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」）; } –

如果用戶未登錄，如何阻止用戶訪問下一頁？

回答

相關問題