django and angular.js with authentication

Question

I have a web app that's already written in Django, and it is working quite well. I want to add a few views for angular as the plan is to move into that direction. One issue i'm facing is that some of my controllers require login, with django we normally use the @login_required decorator and everything is fine.

But with angular.js calling the controllers (for api's), the redirect is not happening. I'm assuming I'll have to somehow check if my django user is authenticated directly from angular side. Is there any explanation on how to confirm this on angular? I have been struggling with this and have read the following:

https://docs.angularjs.org/api/ng/service/$http

https://medium.com/@vince_prignano/angular-js-with-django-bde834dbd61e

$routeProvider not triggered after login redirect

http://www.django-rest-framework.org/api-guide/authentication/

Basically, I want to confirm, via Angular, that my user is logged in and if not, redirect them to the login page.

EDIT

I'm implementing a request interceptor as shown here:

Interceptor not working

However, in django @login_required it's returning the html of the redirecting page. Is there a way to get the URL and forward the user there?

Answer 1

Add resolve in your $routeProvider as:

    $routeProvider 
      .when('/', { 
         templateUrl: '/views/main.html' }) 
      .when('/admin', {
         templateUrl: 'views/admin.html', 
         controller: 'AdminCtrl', 
         resolve: { loggedin: checkLoggedin } }) 
      .when('/login', { 
         templateUrl: 'views/login.html', 
         controller: 'LoginCtrl' }) 
      .otherwise({ redirectTo: '/' }); -

See more at: https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs

Answer 2

As mentioned in the previous answer, it would be best if your Django back-end can issue a 401 response when login is required. Right now it sounds like it's sending a 302, which you can still observe in the browser if you're making an XHR request. As you've found, using $http interceptors in Angular are a common way of looking for a 401 and sending the user to a login page.

I've taken a different approach: implement a service that abstracts this a bit, via a method called $user.get() - it makes a request to a known endpoint (in my case, /api/users/current) and rejects the returned promise if it sees a 401. In your case you could implement a rejection handler that uses window.location.href to send the user to your dedicated login page

Disclaimer: I work at Stormpath and we’ve spent a log of time thinking about this :) In my comments above I’m referring to our Stormpath Angular SDK - you can look at this library to see how I’ve solved this problem.