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.