2016-11-25 110 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( ); } });' –

相關問題