I am interested in accessing the information of the currently logged-in user

Question

I am interested in accessing the information of the currently logged-in user

I am new to AngularJS and I am looking for help on retrieving information about the logged-in user. I want to be able to display this information but I'm not sure where to start. Here is my main Angular controller:

var myApp = angular.module('myApp', ['ngResource', 'ngRoute']);

myApp.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'partials/main.html',
      access: {restricted: true}
    })
    // Other route definitions...
});

// Run function to handle route changes and user authentication check
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();
      }
    });
  });
});

// Controller for handling meetups
myApp.controller('meetupsController', ['$scope', '$resource', 'AuthService', function ($scope, $resource, AuthService) {
  // Meetup resource initialization and query
}]);

// Controller for handling user data
myApp.controller('userController', ['$scope', '$resource', function ($scope, $resource) {
  // User resource initialization and query
}]);

If anyone can provide some code examples or guidance, it would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

Angular utilizes Services for various functionalities, such as the Authentication Service provided below. Storing user information in local storage can help maintain user sessions even after closing the application.

 app.factory('AuthService', ['$q', '$http', 'LocalStorageService',
  function($q, $http, LocalStorageService) {
    var service = {};

    service.user = LocalStorageService.get("AUTH_USER", null);

    service.isLoggedIn = function(){
        return service.user != null && service.user != undefined && service.user != "";
    }

    service.checkLogged = function(){
        return $http.get(APPCONFIG.apiAccessPoint + "/user/" + service.user._id + "/isLogged").then(function(response){
            if(!response.data.success || !response.data.logged){
                service.logout();
                return false;
            }
            else{
                return true;
            }
        }, function(response){
            service.logout();
            return false;
        });
    }

    service.login = function(name, password){
        return $http.post(APPCONFIG.apiAccessPoint + "/user/login", {name: name, password: password}).then(function (response){
            if(response.data.success){ 
                LocalStorageService.set('AUTH_USER', response.data.data);
                $http.defaults.headers.common.Authorization = 'Bearer ' + response.data.data.token;
                service.user = response.data.data; 
            } 
            return response.data;
        }, function (response){
            if(response.status == 400 || response.data.error_code == "VAL_ERROR"){
                return response.data;
            }
            else{
                return $q.reject();
            }
        });
    }

    service.logout = function(){
        // remove token from local storage and clear http auth header
        LocalStorageService.deleteValue("AUTH_USER");
        $http.defaults.headers.common.Authorization = '';
        service.user = null;
    }

    return service;
}]);

To demonstrate how this service can be used in a controller (e.g., displaying a profile):

app.controller('ProfileViewCtrl', ['$scope', '$routeParams', 'AuthService', 'UserService',
function($scope, $routeParams, AuthService, UserService) {

     $scope.isLogged = AuthService.isLoggedIn();
     $scope.user = null;
     $scope.notFound = false;
     $scope.ownProfile = false;

     $scope.user = UserService.getUser($routeParams.user).then(function(response){
         if(response.success){
             $scope.user = response.data;
             $scope.notFound = response.data == undefined;
             if(!$scope.notFound && $scope.isLogged){
                 $scope.ownProfile = $scope.user._id == AuthService.user._id;
             }
         }
         else{
             console.log(response.data);
         }
     });


}]);

Alternatively, here's an example with a login page:

 app.controller('LoginCtrl', ['$scope', '$route', 'AuthService',
  function($scope, $route, AuthService) {

    $scope.user = {};

    $scope.login = function(){
        AuthService.login($scope.user.name, $scope.user.password).then(function(response){
            if(response.success){ 
                $route.reload();
            }
            else{
                console.log("Wrong User or password...");
            }
        });
    }
}]);

Answer 2

Angular utilizes Services for various functionalities, such as the Authentication Service provided below. Storing user information in local storage can help maintain user sessions even after closing the application.

 app.factory('AuthService', ['$q', '$http', 'LocalStorageService',
  function($q, $http, LocalStorageService) {
    var service = {};

    service.user = LocalStorageService.get("AUTH_USER", null);

    service.isLoggedIn = function(){
        return service.user != null && service.user != undefined && service.user != "";
    }

    service.checkLogged = function(){
        return $http.get(APPCONFIG.apiAccessPoint + "/user/" + service.user._id + "/isLogged").then(function(response){
            if(!response.data.success || !response.data.logged){
                service.logout();
                return false;
            }
            else{
                return true;
            }
        }, function(response){
            service.logout();
            return false;
        });
    }

    service.login = function(name, password){
        return $http.post(APPCONFIG.apiAccessPoint + "/user/login", {name: name, password: password}).then(function (response){
            if(response.data.success){ 
                LocalStorageService.set('AUTH_USER', response.data.data);
                $http.defaults.headers.common.Authorization = 'Bearer ' + response.data.data.token;
                service.user = response.data.data; 
            } 
            return response.data;
        }, function (response){
            if(response.status == 400 || response.data.error_code == "VAL_ERROR"){
                return response.data;
            }
            else{
                return $q.reject();
            }
        });
    }

    service.logout = function(){
        // remove token from local storage and clear http auth header
        LocalStorageService.deleteValue("AUTH_USER");
        $http.defaults.headers.common.Authorization = '';
        service.user = null;
    }

    return service;
}]);

To demonstrate how this service can be used in a controller (e.g., displaying a profile):

app.controller('ProfileViewCtrl', ['$scope', '$routeParams', 'AuthService', 'UserService',
function($scope, $routeParams, AuthService, UserService) {

     $scope.isLogged = AuthService.isLoggedIn();
     $scope.user = null;
     $scope.notFound = false;
     $scope.ownProfile = false;

     $scope.user = UserService.getUser($routeParams.user).then(function(response){
         if(response.success){
             $scope.user = response.data;
             $scope.notFound = response.data == undefined;
             if(!$scope.notFound && $scope.isLogged){
                 $scope.ownProfile = $scope.user._id == AuthService.user._id;
             }
         }
         else{
             console.log(response.data);
         }
     });


}]);

Alternatively, here's an example with a login page:

 app.controller('LoginCtrl', ['$scope', '$route', 'AuthService',
  function($scope, $route, AuthService) {

    $scope.user = {};

    $scope.login = function(){
        AuthService.login($scope.user.name, $scope.user.password).then(function(response){
            if(response.success){ 
                $route.reload();
            }
            else{
                console.log("Wrong User or password...");
            }
        });
    }
}]);

I am interested in accessing the information of the currently logged-in user

Answer №1

Similar questions

Can we utilize conditions to both select and deselect items using JavaScript and PHP together?

Do you think this architecture is ideal for a NodeJS recursive MongoDB archiver?

Ways to implement a single AJAX function for multiple buttons

What is the process for sorting Google Map markers with AngularJS?

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

Check the browser's developer tools to access JavaScript files

How can one access the owner function from a different function?

I am looking to implement a feature that will disable unchecked checkboxes based on certain conditions in a

Using jQuery to Activate Genuine Events

Optimal Approach for Managing Files in JavaScript

Email attachments not working in Node Mailgun

Leveraging JavaScript for pricing calculations within asp.net framework

Upon clicking the button, input numbers into multiple number type inputs

Error: Attempting to subscribe to a post request returned a null result

What is the best way to implement debouncing for an editor value that is controlled by the parent component?

Removing JSON data with JavaScript

What could be causing the JSF ajax status success to fail in Chrome?

Online application for saving a vast quantity of information on the user's device

The function ajax does not recognize response.forEach as a valid function

Using multiple selectors in JQuery and Javascript