Using AngularJS to maintain a 'Token' throughout the duration of the application

Question

Using AngularJS to maintain a 'Token' throughout the duration of the application

Currently utilizing AngularJS with Restangular to authenticate a user during the login process. Once authenticated, a 'Token' is returned which must be utilized for all subsequent requests.

My inquiry pertains to the optimal method of storing this token using AngularJS. It is crucial that the token persists throughout the lifetime of the application.

I have considered utilizing services for this purpose, but I am encountering the need to repeatedly inject it into controllers in order to maintain its presence.

javascript angularjs

Answer 1

Answer №1

Life is unpredictable when it comes to using web apps, but there is a solution - utilizing localstorage. Here's a sample service demonstrating how to leverage localstorage in Angular. Simply add the following code to your service.js file:

var storeService = innovidServices.factory('storeService', function() {

    var service =
    {
        setClientData:function(client_details)
        {
            window.localStorage.setItem( "client_data", JSON.stringify(client_details) );
            client_data = client_details;
        },
        getClientData:function()
        {
            if (client_data == null)
            {
                client_data = JSON.parse(window.localStorage.getItem("client_data"));
            }
            return client_data;
        }
    }

    var client_data = null;

    return service;
});

Answer 2

Life is unpredictable when it comes to using web apps, but there is a solution - utilizing localstorage. Here's a sample service demonstrating how to leverage localstorage in Angular. Simply add the following code to your service.js file:

var storeService = innovidServices.factory('storeService', function() {

    var service =
    {
        setClientData:function(client_details)
        {
            window.localStorage.setItem( "client_data", JSON.stringify(client_details) );
            client_data = client_details;
        },
        getClientData:function()
        {
            if (client_data == null)
            {
                client_data = JSON.parse(window.localStorage.getItem("client_data"));
            }
            return client_data;
        }
    }

    var client_data = null;

    return service;
});

Answer 3

Answer №2

Storing the 'Token' in the $rootScope seems to be the most effective approach.

myapp.controller('loginCtrl', function($scope, $rootScope) {
    ...
    $rootScope.token = Token;
    ...
});

An alternative method is to utilize an http interceptor to add this token as a GET parameter to every query.

myapp.factory('httpTokenInterceptor', function ($rootScope) {
  return {
    request: function (config) {
      var token = $rootScope.token;
      if (token) {
          config.url =  URI(config.url).addSearch({'token':token}).toString();
      }
      return config;
    }
  };
});

myapp.config(function ($httpProvider) {
  $httpProvider.interceptors.push('httpTokenInterceptor');
});

Answer 4

Storing the 'Token' in the $rootScope seems to be the most effective approach.

myapp.controller('loginCtrl', function($scope, $rootScope) {
    ...
    $rootScope.token = Token;
    ...
});

An alternative method is to utilize an http interceptor to add this token as a GET parameter to every query.

myapp.factory('httpTokenInterceptor', function ($rootScope) {
  return {
    request: function (config) {
      var token = $rootScope.token;
      if (token) {
          config.url =  URI(config.url).addSearch({'token':token}).toString();
      }
      return config;
    }
  };
});

myapp.config(function ($httpProvider) {
  $httpProvider.interceptors.push('httpTokenInterceptor');
});

Using AngularJS to maintain a 'Token' throughout the duration of the application

Answer №1

Answer №2

Similar questions

Ways to serve JSON response following a 400 error code

What is the best way to dynamically shift the position of an image on a page while keeping it in place in real-time?

Struggling to navigate to a specific div element using a hash in an Angular application

Prevent altering client values via developer tools

Retrieve the properties of an object

Calculate the total value of a certain field within an array when a specific condition is satisfied

Troublesome CSS Zoom causing issues with jQuery scrollTop

A guide on setting up a countdown timer in Angular 4 for a daily recurring event with the help of Rxjs Observable and the Async Pipe

The Simple HTML Dom parser is failing to parse contents on these specific websites

Troubleshooting the Create Order Issue: Integrating PayPal Checkout with Smart Payment Buttons using React and Redux

Node.JS encountered an issue preventing the variable from being saved

The output in the window will display the result of doubling the input box value, not the div

Ways to calculate the memory utilization of a JavaScript object

What is the best way to close all modal dialogs in AngularJS?

The .AppendChild() method does not appear to be working as expected following the completion of

Capturing and saving location data without internet connection, and then displaying markers once connectivity is restored

Vue.js encountered an error while trying to load the component: either the template or render function is not

I encountered difficulty accessing a different domain from the node server

Adding multiple clones of Node to an array of objects using a POST request

Can we verify if this API response is accurate?