How to hide the contents of other page untill login using angular4

Question

i have 2 pages.. in one one page i have header section with signIn, and in other page i have top header contents and SignUp form. 1. the top header contents must be hidden. Once i signin the topheader must be shown. 2. if i havent signed in, then the signup form must be shown, once sign IN, the signUp form must be hidden.

score 0 · Answer 1 · answered Feb 13 '18 at 14:10

0

You need to use sessions.

Here is a kind of snippet for you:

app.factory('Session', function($http) {
 var Session = {
    data: {},
    saveSession: function() { /* save session data to db */ },
updateSession: function() { 
  /* load data from db */
  $http.get('session.json').then(function(r) { return Session.data = r.data;});
}
};
Session.updateSession();
 return Session; 
});

Here is Plunker example how you can use that: http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview

answered Feb 13 '18 at 14:10

Muhammad Abbas

55
8

Thanks for response, i need in angular2.. how can i do that.. it is from different pages – Bhrungarajni Feb 13 '18 at 14:11
See the above code. May be this link will be helpful. https://stackoverflow.com/questions/14957450/maintaining-session-through-angular-js – Muhammad Abbas Feb 13 '18 at 14:13

Hrishikesh Kale · Answer 2 · 2018-02-13T15:03:13.903

0

use local storage to set the values like

localStorage.setItem("yourvariable", 'true');

get this variable on every page load to check if it true or no. like

localStorage.getItem("yourvariable");

you can also update the local storage value like

var updatevalue= JSON.parse(localStorage.getItem("yourvariable"));

updatevalue = "false";

localStorage.setItem("yourvariable",JSON.stringify(updatevalue));

edited Feb 13 '18 at 15:03

answered Feb 13 '18 at 14:11

Hrishikesh Kale

6,140
4
18
27

thanks for response, but how can i fetch data from one page to other – Bhrungarajni Feb 13 '18 at 14:12
you can use local storage for this if you want to get this from multiple pages. – Hrishikesh Kale Feb 13 '18 at 14:13
in Ts i had used localstorage, do i need to access the same? – Bhrungarajni Feb 13 '18 at 14:15
check my updated answer you need to store a new variable like setlogin in local storage and check every time if it true. you can also update local storage where you want to make it false. – Hrishikesh Kale Feb 13 '18 at 14:17
so, i give localStorage.setItem('yourvariable', true); in Ts and in other page html what should i give? – Bhrungarajni Feb 13 '18 at 14:17
you need to assign this to a variable like setlogin = localStorage.setItem('yourvariable', true); and to get this value you need something like getLogin = localStorage.getItem('yourvariable'); and in HtML check *ngIf = "getLogin == true" – Hrishikesh Kale Feb 13 '18 at 14:19
login(email,password) { this.localSt.store('boundValue', email); var data = { email:email, password:password }; this.ApiService .login(data) .subscribe( user => { this.signIn.hide(); localStorage.setItem('loggedIn', 'true') this.toasterService.pop('success', 'SignIn Successfull'); this.myFav = true; }, – Bhrungarajni Feb 13 '18 at 14:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165059/discussion-between-hrishikesh-kale-and-bhrungarajni). – Hrishikesh Kale Feb 13 '18 at 14:24

How to hide the contents of other page untill login using angular4

2 Answers2