I have AngularJS project.
in my login controller i've set user values in to localStorageService.set("user", res) when user loging success,it direct to profile html and controlling by Profile controller.in their i have $scope.user = localStorageService.get("user");
currently i can access this user only inside profile html.but i want to access this globally.
eg: in my header html.
how to set this to access in every ware in my project html pages?
Login controller
mymedApp.controller('LoginController', function ($scope, $rootScope, $location, $filter, $http, $window, $document, Common, localStorageService, SweetAlert, Facebook) {
$scope.user = {
user_id : "",
first_name : "",
last_name : "",
};
$scope.login = function () {
Common.get('mobile/signin', $scope.login, function (res, err) {
if (res.user_id > 0) {
localStorageService.set("user", res);
$rootScope.$emit('profileChanged', function () {
$window.location.href = '#/' + profile.js;
});
} else {
SweetAlert.error("Login request failed, please check the email and password and try again.", {
title : "Login Failed!",
confirmButtonColor : '#e74c3c'
});
}
}, true);
};
)};
Profile Controller
myApp.controller('ProfileController', function ($scope, $filter, $rootScope, $http, $window, $document, localStorageService,) {
var init = function () {
if (!localStorageService.get("user")) {
// $window.location.href = '#/login';
} else {
$scope.user = localStorageService.get("user");
}
};
init();
});
You can set,
var user = localStorageService.get("user");
and then set this user variable in a session like,
Session.setValue(variable name(username),user);
and then in which page you want to get that value you can get
Session.getValue(variable name which written during set session(username));
Since you are storing this in localstorage Service it is available globally. You can inject the localstorage service in your desired controller and get it by the same way.
if (!localStorageService.get("user")) {
// $window.location.href = '#/login';
} else {
$scope.user = localStorageService.get("user");
}
Related
I'm using Satellizer for authentication in my Angular app and have pretty much everything working... except that I can't seem to figure out how to display the username (or email) after successful login in the navbar.
My login controller looks like this
$scope.login = function() {
$auth.login($scope.user).then(function(response) {
$scope.user = JSON.stringify(response.data.user);
localStorage.setItem('user', user);
$scope.user = response.data;
$rootScope.authenticated = true;
$rootScope.currentUser = response.data.user;
// redirect user here after successful login
$state.go('home');
}
}
I have this in my $states (using UI Router) for global access
.run(function ($rootScope, $auth, $state) {
$rootScope.$on('$stateChangeStart', function (event, toState, fromState) {
if (toState.loginRequired && !$auth.isAuthenticated()) {
//if ($auth.isAuthenticated()) {
$rootScope.currentUser = JSON.parse($state, localStorage.currentUser);
//$rootScope.currentUser = JSON.stringify($state, localStorage.currentUser);
$state.go('/login');
event.preventDefault();
};
});
});
And then this in my navbar controller
.controller('NavbarCtrl', function($scope, $rootScope, $window, $auth) {
$scope.isAuthenticated = function() {
return $auth.isAuthenticated();
$scope.user.email = $localStorage.currentUser.email;
}
}
I'm not getting any errors in the console, so I'm not sure exactly where I'm going wrong...?
currentUser is undefined in the localStorage, I thought I was setting that in my login controller code above...?
First, you store the user object after login in localStorage.user, then you read currentUser in NavbarCtrl with
$localStorage.currentUser.email;
You should use the same property user, i.e
$scope.user.email = localStorage.user.email;
But then, why do you need this in local storage?
since you put the currentUser in the $rootScope, you should be able to directly use it in your navbar, e.g.
<span>{{currentUser.email}}</span>
I want to find the ID of the logged in user and display it in a page. I am new to angular and I don't have much clue on how to handle a session..
I have an angular app which is connected to backend API (.net core).
I will show the instances where $rootScope is used in the website (login and authorization is already enabled). I need to get an understanding of this to learn the app.
In 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");
}
});
}
};
}]);
I came to know that the information about the user will be available in $rootScope.userInfo. If so, how can I take a value inside it?
Please explain with an example if possible. Thanks in advance.
One:
myApp.controller('loginController', [
'$scope', 'userServices', '$location',
'$rootScope',
function($scope, userServices, $location, $rootScope) {
Inside the controller, $rootScope was injected which makes you have access to the userInfo in that controller.
so if you inject $rootScope into another controller and console.log($rootScope.userInfo) you would see the users data.
myApp.controller('anotherController', ['$scope', '$rootScope', function
($scope, $rootScope){
console.log($rootScope.userInfo) //you'd see the users data from sessionStorage
});
According to this post on quora
$scope is an object that is accessible from current component
e.g Controller, Service only. $rootScope refers to an object
which is accessible from everywhere of the application.
You can think $rootScope as global variable and $scope as local variables.
$rootScope Defn.
In your case, once the user is logged in a key "userInfo" in sessionStorage is created and the same data is copied to $rootScope.userInfo. To check the fields in the userInfo after login try
console.log($rootScope.userInfo);
and print it in the console or open your session storage in your browser debugger tools [for chrome open developer tools>applications>sessionstorage>domainname] to view the values in the "userInfo" key.
Suppose you have
{
uid: "10",
fullname: "John Doe"
}
you can access uid in the script using $rootScope.userInfo.uid or $rootScope.userInfo['uid'].
Just in case you are unable to read the code, here is an explanation
if (window.sessionStorage["userInfo"]) {
$rootScope.userInfo = JSON.parse(window.sessionStorage["userInfo"]);
}
is checking the user is logged in or not.
the factory
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; });
}
}
is calling the server to get the userInfo object.
$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 is calling the above factory and storing the userInfo object.
I need to show the name of current user in the top bar of my website. The user data should be disappeared when user logout. I used the following two services:
app.factory('Auth', ['$resource', function ($resource) {
return $resource('/user/login');
}])
.service('CurrentUser', [function () {
this.user= null;
}]);
Here is my login and topbar controllers.
app.controller('LoginCtrl', ['CurrentUser', 'Auth', '$location', function (CurrentUser, Auth, $location) {
this.login = function () {
var me = this;
me.user = Auth.save(me).$promise.then(
function (res) {
CurrentUser.user = res;
$location.path("/");
}, function (res) {
me.errors = res.data;
});
}
}])
.controller('TopBarCtrl', ['CurrentUser', function (CurrentUser) {
var me = this;
me.user = CurrentUser;
}])
Using this controllers and services in had to use {{contoller.user.user.name}} to show the user's name. Is there any way to use {{contoller.user.name}} instead and keep the two-way bindings?
You would have to use
me.user = CurrentUser.user;
As your are setting the result of your http.save in the first then to the .user property of CurrentUser.
What does the server result, e.g json, look like?
I'm using Facebook connect to login my clients.
I want to know if the user is logged in or not.
For that i use a service that checks the user's status.
My Service:
angular.module('angularFacebbokApp')
.service('myService', function myService($q, Facebook) {
return {
getFacebookStatus: function() {
var deferral = $q.defer();
deferral.resolve(Facebook.getLoginStatus(function(response) {
console.log(response);
status: response.status;
}));
return deferral.promise;
}
}
});
I use a promise to get the results and then i use the $q.when() to do additional stuff.
angular.module('angularFacebbokApp')
.controller('MainCtrl', function ($scope, $q, myService) {
console.log(myService);
$q.when(myService.getFacebookStatus())
.then(function(results) {
$scope.test = results.status;
});
});
My problem is that i need to use the $q.when in every controller.
Is there a way to get around it? So i can just inject the status to the controller?
I understand i can use the resolve if i use routes, but i don't find it the best solution.
There is no need to use $q.defer() and $q.when() at all, since the Facebook.getLoginStatus() already return a promise.
Your service could be simpified like this:
.service('myService', function myService(Facebook) {
return {
getFacebookStatus: function() {
return Facebook.getLoginStatus();
}
}
});
And in your controller:
.controller('MainCtrl', function ($scope, myService) {
myService.getFacebookStatus().then(function(results) {
$scope.test = results.status;
});
});
Hope this helps.
As services in angularjs are singleton you can create new var status to cache facebook response. After that before you make new call to Facebook from your controller you can check if user is logged in or not checking myService.status
SERVICE
angular.module('angularFacebbokApp')
.service('myService', function myService($q, Facebook) {
var _status = {};
function _getFacebookStatus() {
var deferral = $q.defer();
deferral.resolve(Facebook.getLoginStatus(function(response) {
console.log(response);
_status = response.status;
}));
return deferral.promise;
}
return {
status: _status,
getFacebookStatus: _getFacebookStatus
}
});
CONTROLLER
angular.module('angularFacebbokApp')
.controller('MainCtrl', function ($scope, $q, myService) {
console.log(myService);
//not sure how do exactly check if user is logged
if (!myService.status.islogged )
{
$q.when(myService.getFacebookStatus())
.then(function(results) {
$scope.test = results.status;
});
}
//user is logged in
else
{
$scope.test = myService.status;
}
});
I'm using angularFireAuth and I want to retrieve the logged in user's info and use in
all the controllers or services when the app is initial.
Currently, I used this in every controller but i having some problem.
$scope.$on("angularFireAuth:login", function(evt, user){
console.log(user);
});
The callback will not call if it is not a full page load or return null when app initial.
I need some tips for how can I return the authenticated user's info so I can use when app is initial and in all the controllers and services.
Example
When in controller or services
$scope.auth.user.id will return user's ID
$scope.auth.user.name will return user's name
etc
I would start with a userService for this:
angular.module('EventBaseApp').service('userService', function userService() {
return {
isLogged: false,
username: null
}
});
And write a LoginCtrl controller:
angular.module('EventBaseApp')
.controller('LoginCtrl', function ($scope, userService, angularFireAuth) {
var url = "https://example.firebaseio.com";
angularFireAuth.initialize(url, {scope: $scope, name: "user"});
$scope.login = function() {
angularFireAuth.login("github");
};
$scope.logout = function() {
angularFireAuth.logout();
};
$scope.$on("angularFireAuth:login", function(evt, user) {
userService.username = $scope.user;
userService.isLogged = true;
});
$scope.$on("angularFireAuth:logout", function(evt) {
userService.isLogged = false;
userService.username = null;
});
});
Inject the userService anywhere you want the user.
My app that am currently working on that uses this - https://github.com/manojlds/EventBase/blob/master/app/scripts/controllers/login.js
Based on ideas presented here - http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app
i'm not sure quite what your question is. but if you are looking to authorise once rather than in each controller, you can put the code into the module instead and put it into the $rootScope.
var myapp = angular.module('myapp').run(
function ($rootScope) {
$rootScope.user = null;
$rootScope.$on("angularFireAuth:login", function (evt, user) {
$rootScope.user = user;
});
});