I came up with an authentication service (AuthenticationService) that I utilize for making calls to a WEB API. Recently, I stumbled upon interceptors and got intrigued. I thought it would be interesting to create an interceptor that can intercept requests and modify headers based on the state of the AuthenticationService.
However, I encountered an issue when trying to inject the AuthenticationService into my interceptor. The moment I did this, things started breaking on my page. Instead of displaying the actual values, I saw something like {{MyVariableName}}. Furthermore, form submission stopped working altogether - nothing would happen when I clicked a button.
Despite my efforts, I could not pinpoint the exact problem. No error messages or hints were displayed in the console. It felt as if the page was simply broken. Removing the AuthenticationService from the interceptor made everything function properly again. Here is the snippet of my interceptor code:
app.factory('authInjector', ['AuthenticationService', function (AuthenticationService) {
var authInjector = {
request: function (config) {
config.headers['x-session-token'] = 'test';
return config;
}
};
return authInjector;
}]);
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('authInjector');
}]);
The "app" is defined in a separate JavaScript file (app.js) where AuthenticationService resides. Here's how the service is declared:
app.service('AuthenticationService', function ($http) { ... }
My scripts are loaded in the following order:
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/injector.js"></script>
I also attempted to use $injector in my interceptor code, but it proved to be unhelpful. I received an error indicating that $injector was undefined at runtime.
var AuthService = $injector.get('AuthenticationService');
If anyone has insights into what might be the issue with my interceptor and the AuthenticationService, I would greatly appreciate it.
Thanks
Edit: Requested information:
<html ng-app="MyAppName">
app.js:
angular.module('MyAppName').controller('LoginController', function ($scope, $rootScope, $window, AuthenticationService) {
var app = angular.module('MyAppName', ['ngRoute', 'ngSanitize', 'ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
No errors are shown in the console.