Passing data between angularjs and express/node without ajax

Question

I have an AngularJS app running on a node/express backend. I'm using passport for user authentication.

When a user signs in or signs up, my angular controllers communicate with express via $http ajax/xhr calls. The form data is sent, node/express/passport process the data, and they return json data with the user's info (i.e. username).

Angular then uses the user info to update my templates, i.e. {{user.username}}

The problem is that if the user refreshes the entire page, Angular loses this user information. They're still logged in - req.user still contains their info - but angular doesn't know about it.

I'd like to avoid an ajax call just to check if the user is logged in. That'll be an extra http call every new visit...

I can pass the user data to the jade template directly, but that can't be updated by angular later.

why dont u place the user information in your factory/service??? then the data will be preserved — Tim
– Tim, Commented Jun 20, 2014 at 5:20
That's not saved per browser refresh. The cookie answer seems like a good choice, because it works even on reload. — helion3
– helion3, Commented Jun 20, 2014 at 5:26

Nidhish Krishnan · Accepted Answer · 2014-06-20 05:50:11Z

1

I prefer ngStorage

Just check this sample example given below, enter anything you want into the text field and refresh the browser and see

Working Demo Preview

JSFiddle

Since An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage.

Differences with Other Implementations

No Getter 'n' Setter Bullshit - Right from AngularJS homepage: "Unlike other frameworks, there is no need to [...] wrap the model in accessors methods. Just plain old JavaScript here." Now you can enjoy the same benefit while achieving data persistence with Web Storage.
sessionStorage - We got this often-overlooked buddy covered.
Cleanly-Authored Code - Written in the Angular Way, well-structured with testability in mind.
No Cookie Fallback - With Web Storage being readily available in all the browsers AngularJS officially supports, such fallback is largely redundant.

edited Jun 20, 2014 at 5:50

answered Jun 20, 2014 at 5:40

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

helion3 Over a year ago

The big downfall that I've discovered is that if the server loses the session - for whatever reason - the client-side doesn't know. Local storage works well but I still need to find a way for the server to "tell" the client side a session exists and is valid. Some embedded js/json or even a hidden input seems the best choice.

severin.julien · Accepted Answer · 2014-06-20 05:13:02Z

1

I think the easiest way to solve your problem is to use ngCookies.

answered Jun 20, 2014 at 5:13

severin.julien

1,3541 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Passing data between angularjs and express/node without ajax

2 Answers 2

I prefer ngStorage

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

I prefer ngStorage

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related