2016-11-25 111 views
1

我想获得当前用户名,以便我可以显示它。但我不知道该怎么做?有任何想法吗 ?我使用的是authservice这里是我的角度控制器,我想获取用户名。如何获取currenlty的用户名登录用户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; 

    } 

}]); 
+0

请显示authservice的代码。您也可以在Cookie中设置用户详细信息,以便每当用户刷新页面时不会丢失 –

回答

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

我希望这可以帮助你,如果你发现任何困难,我很乐意帮助

+0

首先让我感谢你,希望你花时间帮助我,我会努力工作并回到你的身边 –

+0

没问题,我很开心帮助,让我知道如果它测试它时,它的工作。 –

+0

我得到AuthService.getAuthMember不是函数 –

0

有几个方法如何可以获取当前登录的用户,这主要取决于你的应用程序结构和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); 
      } 
0

只是一个演示例子

在登录控制器

在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; 
}); 
其中安装有仪表板视图中的控制器

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

$scope.$watch(AuthService.isAuthenticated, function(value) { 
    vm.isAuthenticated = value; 
    if (vm.isAuthenticated) { 
     vm.fullName = AuthService.getFullName(); 
     vm.currentUser = AuthService.getCurrentUser(); 
    } 
}); 
0
.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; 
     }, 
     getAuthenticatedMember: function() { 
      if ($cookies.get('currentUser')) { 
      return JSON.parse($cookies.get('currentUser')); 
     } 
     } 
    } 
    return service; 
}); 

这应该工作,我增加了新的功能getAuthenticatedMember并在你需要它,你可以使用它。你可以使用它像这样:

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

非常感谢您,但是我在哪里添加代码? –

+0

,我如何使用它,请帮我 –

+0

'$范围$腕表(AuthService.isAuthenticated,功能(价值){ vm.isAuthenticated =价值;如果 (vm.isAuthenticated){VAR = currentUser AuthService.getAuthenticatedMember( ); } });' –

相关问题