The login logout process question in angular app

[Zhe Feng]

I'm building an twitter like app. So user can access page, then sign up an account, send a twitts.

In this app, I have 1 layout and 3 views which have 3 template with 3 controller. All of them render base on hash url. They are:

• #/home -- home.html, HomeCtrl ---- A public page, so Server side will send the stream line, if user logged in, then show the info they followed, if not, then show the newest messages
• #/my -- my.html, MyCtrl --- A private page, Server side will send the messages which create by current logged in user
• #/account - account.html, AccountCtrl --- A private page, Server side will send the account info(email, name etc....) base on current logged in user.

and in layout, I have a topbar which have 3 links for 3 views, and 3 buttons say login, logout and signup.

When user click login button, I show a popup form, user enter email password, then the data will send back to server and server will put account info into login cookie then when server get request, server will see the request as a logged in request. If the request asking for a private infomation, but not logged in, server will return a 401 error.

In angular, I set an interceptor for httpProvider. So if the ajax request got a 401 error, then I show a login form to ask login.

Everything works fine, so if user access #/home, I show the data, then user access #/my, I show the my messages, if user not logged in, I show a login form. All good.

But, there always a but, when user logged in, then they access #my, then they access #/account, then they click logout button. A logout request send to server and server remove the login cookie. But the thing is user still stay on #/account page, and their account infomation still there which is incorrect.

I know I can set clear the account infomation when they click logout, but which means I need to clear all infomation for all controller and I will have more and more private controller which obviously silly.

So in angular framework, what's the idea for this kind of situation. Please add your thought here. Thanks.

[Jean Maynier]

The easiest way is to call window.location.reload() (not $location) in the callback of the logout $http.

Jean

[Johannes Hiemer]

Hi Zhe,
interesting question indeed. What I am currently doing is the following. I created a userdetails factory, which I inject into each controller. The factory stores some account information of the user on the client side (id etc).

All relevant links contain an ng-show="userdetails!==null". When the user logs out I set userdetails to null and redirect to the main page.

That should work...

[Zhe Feng]

Yes, that's should working. But which means, for every private controller, I need to inject the userdetails. And for every controller, I need have same code say if userdetails==null, then hide and redirect.

I'm sure it's working, but it will repeat a lot same code if there is a lot private controller. 

Since the login process is normally a core and standard process for almost every app. How the angular team design this process?

[Zhe Feng]

That's working for sure. But since reload page, it's out of the angular.

What I'm trying to do is build a pure angular app. So I want this process include in angular framework.

[Alec Taylor]

I am also interested in the most efficient way to do things like this.

Also, sometime I have a relatively public page; however you can't do CRUD operations on it unless you're logged in (authenticated).

So in my server-side framework I 'disable' the buttons, and throw in a "log in to modify!" alert bar at the top.

How do I do this efficiently and effectively in AngularJS?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Josh Kurz]

have you seen https://github.com/angular-app/angular-app? Its pretty nice. Pretty much you separate authentication logic into a services. currentUser is a factory object that can injected into any controller and will tell the ui whether or not the user is authenticated. 

--

Josh Kurz

http://dillingermediaonline.com

[Zhe Feng]

Looks awesome. Thanks a lot. I think that's exactly what I want.