Updating the HTTP request header in AngularJS without requiring a page refresh

I'm in the process of developing a website that utilizes ngRoute for page navigation. When a user logs in, a form will appear and upon successful login, the controller will modify the http header for subsequent requests. However, I am encountering an issue where the page needs to be reloaded in order for the Token to be added to the header.

Controller :

app.controller('catCtrl',['Api','$scope','$cookieStore','$rootScope',function (Api,$scope,$cookieStore,$rootScope) {
$scope.Login = function(){
    Api.loginEmail($scope.log_email, $scope.pass, 'chrome', 'windows','').success(function(response){
      $cookieStore.put('Auth-Key', 'Token ' + response.token);

      $scope.is_Loggedin = true;
      $scope.showLoginWin();
    }).error(function(response){
      $scope.log_email = null;
      $scope.pass = null;
      $scope.error = response.error;
    });
  };
}

App.run :

app.run(['$cookieStore','$http',function($cookieStore, $http){

  $http.defaults.headers.common['Authorization'] = $cookieStore.get('Auth-Key');
}]);

Is there a way to update the header without requiring a page reload?

Answer №1

If you're looking to include your token in subsequent requests post-login, one option is to utilize Angular interceptor. Check out these examples for guidance on how to add a token via interceptor:

Interceptor Example 1

Interceptor Example 2

Here's a snippet of sample code:

app.factory('httpRequestInterceptor', function () {
  return {
    request: function (config) {    
      config.headers['Authorization'] = $cookieStore.get('Auth-Key');     

      return config;
    }
  };
});

Remember to exclude this header verification for the Login in your service layer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uploading Images to Cloudinary in a MERN Stack: A Step-by-Step Guide

I am facing an issue while trying to store company details, including a company logo, in Mongo DB. I am attempting to upload the image to Cloudinary and then save the URL in Mongo DB along with other details. Currently, my code is not functioning as expec ...

Broken Mui Input - Full width with attributes for minimum and maximum values

I've created a sandbox to demonstrate an issue I came across that seems unbelievable, but it's happening. Here's the link: https://codesandbox.io/s/nifty-swanson-yxj4n2?file=/NumberField.js:1075-1097 The problem is simple - when both the ht ...

Why is it that every time I press the play button, nothing happens?

When I try to click on the play button, it does not start playing. I suspect there is something that needs to be adjusted in the javascript. Can someone please assist me in fixing this issue? Link to the example View Screenshot <script> (functio ...

Using $regex in mongodb's pipeline operations allows for advanced string

I need to be able to use $regex in order to search for any words that contain a specific keyword provided by the user, but I'm experiencing issues. Here's what I have so far: aggregatePipeline.push({ $match: { name: { $reg ...

Is it possible for an Ajax/jQuery script to display multiple dependent dropdown box options within a single Form URL?

In the process of developing a basic form prototype that includes 4 entries in PythonAnywhere (Python 3.7 + Django): PinID (Independent, simple manual number entry) Region (Independent Dropdown Box) Name (Region-Dependent Dropdown Box) Source (Name-Depen ...

Unable to prolong TypeScript document

As I develop a drag and drop interface, upon dropping a file, the native File is retrieved. To enhance this interface with additional information, I decided to explore various approaches. In my initial attempt, I utilized: interface AcceptedFile extends ...

Instead of using colons, display the separation of hours, minutes, and seconds with underscores

Currently, I am utilizing moment.js to retrieve the present date and time with the intention of formatting it in the specific format below 'MMMM Do YYYY, h:mm:ss a' Unfortunately, the problem arises as the delineation between hours, minutes, and ...

What is the best way to implement autoplay sound on a JavaScript webpage?

I'm currently working on a web system aimed at monitoring values from a database, and I have the requirement to trigger a sound alert when a specific range of values is received. Despite trying various examples found online, none of them have been suc ...

Exploring the retrieval of stored information from $localStorage within an AngularJS framework

I have been working on a MEAN app, and after a user successfully logs in, I want to save the returned user data in the localStorage of the browser for future use. I am using the ngStorage module for this purpose. Below is the code snippet from my LoginCont ...

What's the best way to handle variables and numerical calculations within PHP loops when dealing with forms?

I'm currently developing a basic PHP page where users can choose how many numbers they want to add together. After selecting the quantity, they input the numbers on a new page, click a button, and then see the sum displayed. The challenge I'm fa ...

How can I retrieve the top-level key based on a value within a JSON object nested in JavaScript?

If I have the value Africola for key name in the following nested JSON structure, how can I retrieve its corresponding upper-level key 'barID1' using JavaScript? { "barID1": { "address": "4 East Terrace, Sydney NSW 2000", "appStoreURL" ...

The process of converting a response into an Excel file

After sending a request to the server and receiving a response, I am struggling with converting this response into an Excel file. Response header: Connection →keep-alive cache-control →no-cache, no-store, max-age=0, must-revalidate content-dispositio ...

looping through the elements in a collection using a for-in loop

Issue with IE 11 Console Chrome Console Behavior When changing the word 'item' to 'anotherItem' in the loop like so: var obj = { id1: 'item 1', id2: 'item 2', id3: 'item 3' }; for (anothe ...

Emphasize the search term "angular 2"

A messenger showcases the search results according to the input provided by the user. The objective is to emphasize the searched term while displaying the outcome. The code snippets below illustrate the HTML and component utilized for this purpose. Compon ...

issue with Knex query output when integrated with Express.js

Below is the Knex raw SQL query that I have written. knex.raw("select group_concat(details_odishagovtjobdetails.more_info) as more_info,\ scrap_odishagovtjobs.start_date,scrap_odishagovtjobs.last_date,scrap_odishagovtjobs.post_name,\ ...

Place jQuery popup box in position

After numerous attempts, I still can't seem to find a working solution. All I want is to move my jQuery dialog box down by about 50px from the top of the page. Any suggestions on how to achieve this? function openingDialog() { $("#message").dialo ...

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

Enhancing Web Service Calls with Angular 2 - The Power of Chaining

I am currently facing an issue where I need to make multiple web service calls in a sequence, but the problem is that the second call is being made before the .subscribe function of the first call executes. This is causing delays in setting the value of th ...

An issue with the function in AngularJS has caused an undefined error

Encountering an error in my AngularJs app that states: TypeError: undefined is not a function at Scope.$rootScope.shareImageNow (index.controller.js:150) After researching on Google, I still couldn't figure out the reason behind this issue. co ...

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...