如何處理$ rootscope並獲取AngularJS中登錄用戶的用戶ID？

Question

我想找到登錄用戶的ID並將其顯示在頁面中。 我是angel的新手，我對如何處理會議沒有太多的了解。

我有一個角度應用程序，它連接到后端API（.net核心）。

我將展示在網站中使用$ rootScope的實例（已經啟用登錄和授權）。 我需要對此有所了解才能學習該應用程序。

在App.js中：

//Run phase
myApp.run(function($rootScope, $state) {
    $rootScope.$state = $state; //Get state info in view

    //Should below code be using rootScope or localStorage.. Check which one is better and why.

    if (window.sessionStorage["userInfo"]) {

        $rootScope.userInfo = JSON.parse(window.sessionStorage["userInfo"]);
    }

    //Check session and redirect to specific page
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        if(toState && toState.data && toState.data.auth && !window.sessionStorage["userInfo"]){
            event.preventDefault();
            window.location.href = "#login";
        }       

        if(!toState && !toState.data && !toState.data.auth && window.sessionStorage["userInfo"]){
            event.preventDefault();
            window.location.href = "#dashboard";
        }
    });


});

Users.js：

'use strict';
angular.module('users', []);

//Routers
myApp.config(function($stateProvider) {

  //Login
  $stateProvider.state('login', {
    url: "/login",
    templateUrl: 'partials/users/login.html',
    controller: 'loginController'
  });
//Factories
myApp.factory('userServices', ['$http', function($http) {

    var factoryDefinitions = {
        login: function (loginReq) {
            $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
          return $http.post('http://localhost:1783/api/token?UserName='+loginReq.username+'&password='+loginReq.password).success(function (data) { return data; });
      }
}

    return factoryDefinitions;
  }
]);

//Controllers
myApp.controller('loginController', ['$scope', 'userServices', '$location', '$rootScope', function($scope, userServices, $location, $rootScope) {

    $scope.doLogin = function() {

        if ($scope.loginForm.$valid) {  
            userServices.login($scope.login).then(function(result){
                $scope.data = result;
                if (!result.error) {
                    window.sessionStorage["userInfo"] = JSON.stringify(result.data);
                    $rootScope.userInfo = JSON.parse(window.sessionStorage["userInfo"]);
                    //$localStorage.currentUser = { username: login.username, token: result.data };
                    //$http.defaults.headers.common.Authorization = 'Token ' + response.token;
                    $location.path("/dashboard");
                }
            }); 
        }
    };
}]);

我知道有關用戶的信息將在$ rootScope.userInfo中提供。 如果是這樣，我如何在其中取值？

如果可能，請舉例說明。 提前致謝。

Answer 1

一：

myApp.controller('loginController', [
'$scope', 'userServices', '$location', 
'$rootScope', 
function($scope, userServices, $location, $rootScope) {

在控制器內部，注入了$rootScope ，這使您可以訪問該控制器中的userInfo 。

因此，如果將$rootScope注入另一個控制器和console.log($rootScope.userInfo)您將看到用戶數據。

myApp.controller('anotherController', ['$scope', '$rootScope', function
 ($scope, $rootScope){

    console.log($rootScope.userInfo) //you'd see the users data from sessionStorage

});

根據有關quora的這篇文章

$ scope是可以從當前組件（例如，控制器，僅服務）訪問的對象。 $ rootScope指的是可以從應用程序的任何位置訪問的對象。 您可以將$ rootScope視為全局變量，將$ scope視為局部變量。

$ rootScope定義

Answer 2

在您的情況下，一旦用戶登錄，就會在sessionStorage中創建鍵“ userInfo”，並將相同的數據復制到$ rootScope.userInfo。 要在登錄后檢查userInfo中的字段，請嘗試

console.log($rootScope.userInfo);

並在控制台中打印它，或在瀏覽器調試器工具中打開會話存儲（對於chrome打開開發人員工具>應用程序>會話存儲>域名），以查看“ userInfo”鍵中的值。

假設你有

{
    uid: "10",
    fullname: "John Doe"
}

您可以使用$ rootScope.userInfo.uid或$ rootScope.userInfo ['uid']訪問腳本中的uid。

萬一您無法閱讀代碼，這里有一個解釋

if (window.sessionStorage["userInfo"]) {

    $rootScope.userInfo = JSON.parse(window.sessionStorage["userInfo"]);
}

正在檢查用戶是否登錄。

該工廠

myApp.factory('userServices', ['$http', function($http) {

var factoryDefinitions = {
    login: function (loginReq) {
        $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
      return $http.post('http://localhost:1783/api/token?UserName='+loginReq.username+'&password='+loginReq.password).success(function (data) { return data; });
  }
}

正在調用服務器以獲取userInfo對象。

$scope.doLogin = function() {

    if ($scope.loginForm.$valid) {  
        userServices.login($scope.login).then(function(result){
            $scope.data = result;
            if (!result.error) {
                window.sessionStorage["userInfo"] = JSON.stringify(result.data);
                $rootScope.userInfo = JSON.parse(window.sessionStorage["userInfo"]);
                //$localStorage.currentUser = { username: login.username, token: result.data };
                //$http.defaults.headers.common.Authorization = 'Token ' + response.token;
                $location.path("/dashboard");
            }
        }); 
    }
};

$ scope.doLogin正在調用上述工廠並存儲userInfo對象。