Question

我想获取当前的用户名，以便我可以显示它。但我不知道该怎么办？有任何想法吗？我正在使用authservice这是我的角度控制器，我想获得用户名。

myApp.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
  var Meetup = $resource('/api/meetups');
$scope.meetups = []

  Meetup.query(function (results) {
    $scope.meetups = results;
  });


  $scope.createMeetup = function () {
    var meetup = new Meetup();
    meetup.name = $scope.meetupName;
    meetup.$save(function (result) {
      $scope.meetups.push(result);
      $scope.meetupName = '';
    });
  }
}]);

我的主要角度控制器代码 var myApp = angular.module（'myApp'，['ngResource'，'ngRoute']）;

myApp.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'partials/main.html',
      access: {restricted: true}
    })
    .when('/api/meetups', {
      templateUrl: 'partials/main.html',
      access: {restricted: true}
    })
    .when('/login', {
      templateUrl: 'partials/login.html',
      controller: 'loginController',
      access: {restricted: false}
    })
    .when('/prive', {
      templateUrl: 'partials/prive.html',
      controller: 'userController',
      access: {restricted: true}
    })
    .when('/logout', {
      controller: 'logoutController',
      access: {restricted: true}
    })
    .when('/register', {
      templateUrl: 'partials/register.html',
      controller: 'registerController',
      access: {restricted: false}
    })
    .when('/one', {
      template: '<h1>This is page one!</h1>',
      access: {restricted: true}
    })
    .when('/two', {
      template: '<h1>This is page two!</h1>',
      access: {restricted: false}
    })
    .otherwise({
      redirectTo: '/'
    });
});

myApp.run(function ($rootScope, $location, $route, AuthService) {
  $rootScope.$on('$routeChangeStart',
    function (event, next, current) {
      AuthService.getUserStatus()
      .then(function(){
        if (next.access.restricted && !AuthService.isLoggedIn()){
          $location.path('/login');
          $route.reload();
        }
      });
  });
});







myApp.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
  var Meetup = $resource('/api/meetups');
$scope.meetups = []

  Meetup.query(function (results) {
    $scope.meetups = results;
  });


  $scope.createMeetup = function () {
    var meetup = new Meetup();
    meetup.name = $scope.meetupName;
    meetup.$save(function (result) {
      $scope.meetups.push(result);
      $scope.meetupName = '';
    });
  }





}]);

我的第二个角度代码：

var app = angular.module('myApp');

app.controller('loginController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {

    $scope.login = function () {

      // initial values
      $scope.error = false;
      $scope.disabled = true;

      // call login from service
      AuthService.login($scope.loginForm.username, $scope.loginForm.password)
        // handle success
        .then(function () {
          $location.path('/');
          $scope.disabled = false;
          $scope.loginForm = {};
        })
        // handle error
        .catch(function () {
          $scope.error = true;
          $scope.errorMessage = "Invalid username and/or password";
          $scope.disabled = false;
          $scope.loginForm = {};
        });

    };

  $scope.posts = [];
  $scope.newPost = {created_by: '', text: '', created_at: ''};

  $scope.post = function(){
    $scope.newPost.created_at = Date.now();
    $scope.posts.push($scope.newPost);
    $scope.newPost = {created_by: '', text: '', created_at: ''};
  };
}]);

app.controller('logoutController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {

    $scope.logout = function () {

      // call logout from service
      AuthService.logout()
        .then(function () {
          $location.path('/login');
        });

    };

    $scope.gotoregister = function () {




          $location.path('/register');


    };
    $scope.gotoprive = function () {




          $location.path('/prive');


    };

}]);

app.controller('registerController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {

    $scope.register = function () {

      // initial values
      $scope.error = false;
      $scope.disabled = true;

      // call register from service
      AuthService.register($scope.registerForm.username, $scope.registerForm.password)
        // handle success
        .then(function () {
          $location.path('/login');
          $scope.disabled = false;
          $scope.registerForm = {};
        })
        // handle error
        .catch(function () {
          $scope.error = true;
          $scope.errorMessage = "Something went wrong!";
          $scope.disabled = false;
          $scope.registerForm = {};
        });

    };

}]);

和我的服务

angular.module('myApp').factory('AuthService',
  ['$q', '$timeout', '$http',
  function ($q, $timeout, $http) {

    // create user variable
    var user = null;

    // return available functions for use in the controllers
    return ({
      isLoggedIn: isLoggedIn,
      getUserStatus: getUserStatus,
      login: login,
      logout: logout,
      register: register
    });

    function isLoggedIn() {
      if(user) {
        return true;
      } else {
        return false;
      }
    }

    function getUserStatus() {
      return $http.get('/user/status')
      // handle success
      .success(function (data) {
        if(data.status){
          user = true;
        } else {
          user = false;
        }
      })
      // handle error
      .error(function (data) {
        user = false;
      });
    }

    function login(username, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/user/login',
        {username: username, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.status){
            user = true;
            deferred.resolve();
          } else {
            user = false;
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

    function logout() {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a get request to the server
      $http.get('/user/logout')
        // handle success
        .success(function (data) {
          user = false;
          deferred.resolve();
        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

    function register(username, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/user/register',
        {username: username, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.status){
            deferred.resolve();
          } else {
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

}]);

Answer 1

所以这应该可行，也许你需要进行一些小的调整，因为我不知道你的应用程序究竟是如何构建的，但这样可行。

首先，您需要将AuthService更改为

angular.module('myApp').factory('AuthService',
  ['$q', '$timeout', '$http',
  function ($q, $timeout, $http, $cookies) {

    // create user variable
    var user = null;

    // we must create authMemberDefer var so we can get promise anywhere in app
    var authenticatedMemberDefer = $q.defer();

    // return available functions for use in the controllers
    return ({
      isLoggedIn: isLoggedIn,
      getUserStatus: getUserStatus,
      login: login,
      logout: logout,
      register: register,
      getAuthMember: getAuthMember,
      setAuthMember: setAuthMember
    });

    function isLoggedIn() {
      if(user) {
        return true;
      } else {
        return false;
      }
    }
    //this is function that we will call each time when we need auth member data
    function getAuthMember() {
        return authenticatedMemberDefer.promise;
    }
    //this is setter function to set member from coockie that we create on login
    function setAuthMember(member) {
        authenticatedMemberDefer.resolve(member);
    }

    function getUserStatus() {
      return $http.get('/user/status')
      // handle success
      .success(function (data) {
        if(data.status){
          user = true;
        } else {
          user = false;
        }
      })
      // handle error
      .error(function (data) {
        user = false;
      });
    }

    function login(username, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/user/login',
        {username: username, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.status){
            user = true;
            deferred.resolve();

            //**
            $cookies.putObject('loginSession', data);
            // here create coockie for your logged user that you get from this response, im not sure if its just "data" or data.somethingElse, check you response you should have user object there


          } else {
            user = false;
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

    function logout() {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a get request to the server
      $http.get('/user/logout')
        // handle success
        .success(function (data) {
          user = false;
          deferred.resolve();
          //on log out remove coockie
          $cookies.remove('loginSession');

        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

    function register(username, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/user/register',
        {username: username, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.status){
            deferred.resolve();
          } else {
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

}]);

在authService更改之后，你必须在你的应用程序上运行，所以每次应用程序运行（刷新）它首先检查coockie以查看是否有活动会话（成员），如果有它将在我们的内部设置它AuthService。

myApp.run(function($rootScope, $location, $route, AuthService, $cookies) {
    $rootScope.$on('$routeChangeStart',
        function(event, next, current) {
            if ($cookies.get('loginSession')) {
                var session = JSON.parse($cookies.get('loginSession'));
                AuthService.setAuthMember(session);
            } else {
                $location.path('/login');
            }
        });
});

在您想要获得auth成员的任何地方，您必须首先包含在您的控制器/指令AuthService中并执行此操作

AuthService.getAuthMember().then(function(member){
 console.log(member);
 //here your member should be and you can apply any logic or use that data where     u want
});

我希望这会对你有所帮助，如果你发现任何困难我很乐意提供帮助

Answer 2

如何获取当前登录用户的方法很少，主要取决于您的应用程序结构和API，您可能应该有API端点来获取经过身份验证的成员，并且在每次应用刷新时都会进行调用。如果你能告诉我们你的authservice。

编辑：

同样成功登录后，您可以将有关已记录用户的信息存储在coockie中，如下所示

   function doLogin(admin) {
     return authMemberResources.login(details).then(function(response) {
       if (response) {
         $cookies.putObject('loginSession', response);
       } else {
         console.log('wrong details');
       }
     });

所以基本上你可以使用angularjs coockies服务并使loginSession像这样coockie，并在应用程序刷新或任何你需要登录用户信息的地方，你可以这样：

            if ($cookies.get('loginSession')) {
                var session = JSON.parse($cookies.get('loginSession'));
                console.log(session);
            }

Answer 3

只是一个演示示例

登录控制器中的

var login = function(credentials) {
    AuthService.login(credentials).then(function(result) {
        var user = result.data;
        AuthService.setCurrentUser(user);
        $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
    }).catch(function(err) {
        if (err.status < 0) {
            comsole.error('Please check your internet connection!');
        } else {
            $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
        }
    });
};

<\ n>在AuthService中

.factory('AuthService', function($http, $cookies, BASE_URL) {
    var service = {
        login: function(formdata) {
            return $http.post(BASE_URL + '/login', formdata);
        },
        setCurrentUser: function(user) {
            $cookies.putObject('currentUser', user);
        },
        isAuthenticated: function() {
            return angular.isDefined($cookies.getObject('currentUser'));
        },
        getFullName: function() {
            return $cookies.getObject('currentUser').firstName + ' ' + $cookies.getObject('currentUser').lastName;
        }
    }
    return service;
});

在随仪表板视图附加的控制器中

$scope.$watch(AuthService.isAuthenticated, function(value) {
    vm.isAuthenticated = value;
    if (vm.isAuthenticated) {
        vm.fullName = AuthService.getFullName();
        vm.currentUser = AuthService.getCurrentUser();
    }
});

Answer 4

$scope.$watch(AuthService.isAuthenticated, function(value) {
  vm.isAuthenticated = value;
  if (vm.isAuthenticated) {
    vm.currentUser = AuthService.getAuthenticatedMember();
  }
});

这应该有效，我添加了新功能getAuthenticatedMember，您可以在需要的地方使用它。你可以像这样使用它：

            Time   Size Ask    Bid    Trade
11-1-2016   9:00:12 100 <NA>    901     <NA>
11-1-2016   9:00:21 5   <NA>    <NA>    950
11-1-2016   9:00:21 5   <NA>    950     <NA>
11-1-2016   9:00:21 10  905     <NA>    <NA>
11-1-2016   9:00:24 500 <NA>    921     <NA>
11-1-2016   9:00:28 2   <NA>    879     <NA>
11-1-2016   9:00:31 6   1040    <NA>    <NA>
11-1-2016   9:00:39 5   <NA>    <NA>    950
11-1-2016   9:00:39 5   <NA>    950     <NA>
11-1-2016   9:00:39 10  905     <NA>    <NA>

如何获取用户authservice登录的currenlty用户名

4 个答案: