In my last post we saw the simple 3 step recipe for adding basic authentication in your Angular app.
This time let’s see how to get a very common feature to work: taking the user back to where he was before his session expired and he had to login again.
We all know that it sucks to suddenly get logged out and have to dig through lots of tabs to find the right page again. It turns out that getting something like this to work with Angular takes only a handful of code changes. But, it’s a bit tricky, so pay attention:
We’re continuing off the previous post. This means that we already have an interceptor that redirects to the login page whenever a request fails with status 401.
Our Modus Operandi
You’ve seen apps where the login URL looks something like:
foo.com/login?url=%2Fsome-page and similar. And we’ll be using something very similar.
Whenever our interceptor would transition to the login page it would first grab the current URL and pass it as a parameter to the login state. Our login state, upon success, will redirect to that URL.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
As previously, it just listens for 401 responses and redirects to the login state. The important bit is that we take the current URL using
$location.url() and pass it as a parameter to the login state.
Login State Logic
When the user clicks the login button we perform something like this:
1 2 3 4 5 6 7 8 9 10 11
Now you can see that we’re simply using that state parameter, when it’s present, to move to it.
The important part is to make sure that you encode the state of your pages in the URL. That’s it!
The live demo
It’s a simple app with a couple of screens. Each screen has a button on the top to let you simulate a session expiring – it will cause a 401 to be returned which will then redirect you to the login page. You can see how after submitting the login you get right back where you were – even with URL parameters.
What if the URL isn’t enough?
Sometimes, though rarely in my experience, you want to restore the state with more than just the URL. For example, maybe the user has started typing something that you want to save.
In those scenarios I usually go with using a service to store the objects that I need. Then, when our interceptor redirects to the login page it can first shout out an event. Whatever page is currently displayed can catch the event and persist the state. See my post about notifying changes.
Since the last post I got several requests to discuss more features, like admin only pages, etc. Subscribe below so you won’t miss them and feel free to comment if you have other ideas I should add to the mix!
“Maintaining AngularJS feels like Cobol 🤷…”
You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?
It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.
Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.