1

I have an Angular 1.4.8 application over a Rails 4.2.4 RESTful API.

app.js

var myApp = angular.module('myApp',
[
    'ngResource',
    'ngRoute',
    'templates',
    'ui.mask',
    'ng-rails-csrf'
]);

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
        .when('/', { controller: 'DashboardController', templateUrl: 'dashboard/index.html' })
        .when('/dashboard', { controller: 'DashboardController', templateUrl: 'dashboard/index.html' })
        .when('/settings/account', { controller: 'SettingsAccountController', templateUrl: 'settings/account.html' })
}]);

myApp.factory('httpResponseInterceptor',['$q','$location',
function($q,$location){
    return {
        response: function(response){
            if (response.status === 401) {
                console.log("Response 401");
            }
            return response || $q.when(response);
        },
        responseError: function(rejection) {
            if (rejection.status === 401) {
                console.log("Response Error 401", rejection);
                $location.path('/401');
            }
                        if (rejection.status === 403) {
                console.log("Response Error 403", rejection);
                $location.path('/403');
            }
                        else if (rejection.status === 404) {
                console.log("Response Error 404", rejection);
                $location.path('/404');
            }
                        else if (rejection.status === 500) {
                console.log("Response Error 500", rejection);
                $location.path('/500');
            }
            return $q.reject(rejection);
        }
    }
}])
.config(['$httpProvider',function($httpProvider) {
    //Http Intercpetor to check auth failures for xhr requests
    $httpProvider.interceptors.push('httpResponseInterceptor');
}]);

As you see I have set up the application to remove the hashbang: $locationProvider.html5Mode(true);

In Rails, this is my routing (stripped):

require 'api_constraints'

Rails.application.routes.draw do

  namespace :api, format: :json, defaults: {format: 'json'} do
    scope module: :v1, constraints: ApiConstraints.new(version: 1, default: true) do
      get '/settings/account' => "settings#edit_account", as: :edit_settings_account
      put '/settings/account' => "settings#update_account", as: :update_settings_account
      post '/feedback' => "feedbacks#create", as: :feedback
      get '/services' => "services#list", as: :services
    end
  end

  # Catch errors
  get "/401", :to => "errors#access_denied"
  get "/403", :to => "errors#access_denied"
  get "/404", :to => "errors#not_found"
  get "/422", :to => "errors#unacceptable"
  get "/500", :to => "errors#internal_error"
  get '*path', :to => 'sessions#new'

  root 'dashboard#index'

end

and the relative error controller:

class ErrorsController < ApplicationController
  skip_authorization_check

  def access_denied
    render :status => 401
  end

  def not_found
    render :status => 404
  end

  def unacceptable
    render :status => 422
  end

  def internal_error
    render :status => 500
  end

end

So my problem is that when an exception happens e.g. I visit a page and the user doesn't have authorisation to do so, I get a response error in the console and the httpResponseInterceptor forwards this error to the /403 or /401 page which is picked up by Angular and nothing is displayed. If I press refresh or enter the /401 address directly, I get forwarded to the actual template.

If the page is refreshed, the routing is right, but If a response error happens within Angular and the $location is called, nothing happens but the url in the address bar changes.

A solution could be to refresh/reload the whole page on redirection to /<error_route> pages. Or of course correct something I am making wrong in the whole structure.

Please advice.

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.