2016-06-11 60 views
0

在登錄操作我正在存儲在localstorage usernametoken爲登錄用戶後來我創建身份驗證。發佈請求的標頭。使用身份驗證標題,以防止訪問頁面

更新: 對此更具體。我有userService這succ。從本地存儲中提取和檢索用戶數據,其中我有username,sessionIdisLogged

我的問題是:現在有Auth。頭文件,我需要關於localstorage內部登錄用戶的所有信息,我如何編寫事件處理程序來檢查用戶是否在每次更改路由之前登錄。

我應該在app.js上這樣做,在那裏啓動我的應用程序並注入userService?如果是的話。

(function() { 
    "use strict"; 
    var app = angular.module("myApp", 
     ["common.services", 
      "ui.router", 
      "ui.mask", 
      "userService", 
      "ui.bootstrap"]); 
    .... 

enter image description here

如何我現在可以使用此存儲權威性頭,以訪問/拒絕 訪問特定網頁?

更新2:app.js

(function() { 
    "use strict"; 
    var app = angular.module("myApp", 
     ["common.services", 
      "ui.router", 
      "ui.mask", 
      "userService", 
      "ui.bootstrap"]);   

    app.config(["$stateProvider", "$urlRouterProvider", 
      function ($stateProvider, $urlRouterProvider) { 
       $urlRouterProvider.otherwise("/"); 

       $stateProvider 
        .state("index", { 
         url: "/", 
         templateUrl: "app/index.html", 
        }) 
        // Restricted 
        .state("home", { 
         url: "/home", 
         templateUrl: "app/home/home.html", 
         controller: "HomeController as vm" 
        }) 
      }] 
    ); 
}()); 

回答

0

您可以通過標記與自定義屬性所需的路線和驗證令牌實現這一目標是有效的,當「位置」正在發生變化。

更新假設你可以驗證用戶通過檢查的userServiceisLogged性能認證:

(function() { 
"use strict"; 
var app = angular.module("myApp", 
    ["common.services", 
     "ui.router", 
     "ui.mask", 
     "userService", 
     "ui.bootstrap"]); 

app.config(["$stateProvider", "$urlRouterProvider", 
    function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise("/"); 

     $stateProvider 
      .state("index", { 
       url: "/", 
       templateUrl: "app/index.html", 
      }) 
      // Restricted 
      .state("home", { 
       url: "/home", 
       templateUrl: "app/home/home.html", 
       controller: "HomeController as vm", 
       data: { 
        requiresLogin: true 
       } 
      }) 
    }] 
).run(['$rootScope', '$state', 'userService', function($rootScope, $state, userService) { 
    $rootScope.$on('$stateChangeStart', function(e, to) { 
     if (to.data && to.data.requiresLogin && !userService.isLogged) { 
      e.preventDefault(); 
      $state.go('index'); 
     } 
    }) 
}]); 
}()); 
+0

偉大的,我剛剛更新了我的整個app.js代碼問題。請將您的代碼作爲擴展答案發布到app.js中。謝謝。 – user1765862

0

我覺得你的問題的正確方法是在路由使用resolve屬性,所以用戶如果他沒有登錄,則無法導航到某些頁面,並且一旦登錄,就可以將用戶對象注入到控制器中

例如,要導航到主頁,您必須先登錄

.when("/home", { 
templateUrl: "homeView.html", 
controller: "homeController", 
resolve: { 
    user: function(AuthenticationService){ 
     return AuthenticationService.getUser(); 
    } 
    } 
}) 

app.controller("homeController", function ($scope, user) { 
    $scope.user = user; 
}); 

很好的例子:https://www.sitepoint.com/implementing-authentication-angular-applications/