Dealing with redirecting to the login page in Angular

Question

Dealing with redirecting to the login page in Angular

I recently started working with Angular and I feel completely lost.

My initial task involves making a simple Rest-GET request, but the destination is located behind an external login page. This results in my request being redirected to the external page and causing my application to fail.

What I am trying to achieve is to open the redirected page, log in successfully, and then be redirected back to the originally requested page (assuming this should be handled by the external page).

Although my code isn't very advanced yet, here it is:

var app = angular.module('webUI', [])
app.controller('Rest', function($scope, $http) {
    $http.get('https://test/rest/monitoring')
        .then(function successCallback(response) {
                $scope.rest = response.data;
            }, function errorCallback(response){

            });
});

Is there a straightforward Angular function that I may be overlooking, which could help me achieve what I'm aiming for?

Edit: Here is the error message that appears in my browser console (Chrome->F12):

The redirect from '' to '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

javascript angularjs http-redirect authentication

Answer 1

Answer №1

To ensure proper redirection, remember to insert your desired URL path into the successCallback function by using $location.path('/newURL'). Don't forget to also include the necessary dependencies for $location in your controller.

      let app = angular.module('webApp', [])
      app.controller('API', function ($scope, $http, $location) {
          $http.get('https://api/data')
              .then(function onSuccess(response) {
                  $scope.data = response.data;
                  $location.path('/newURL');
              }, function onError(response) {

              });
      });

Answer 2

To ensure proper redirection, remember to insert your desired URL path into the successCallback function by using $location.path('/newURL'). Don't forget to also include the necessary dependencies for $location in your controller.

      let app = angular.module('webApp', [])
      app.controller('API', function ($scope, $http, $location) {
          $http.get('https://api/data')
              .then(function onSuccess(response) {
                  $scope.data = response.data;
                  $location.path('/newURL');
              }, function onError(response) {

              });
      });

Answer 3

Answer №2

Consider incorporating angular routing into your project for better navigation and user experience. Check out this resource to learn more: You can also find a helpful example here: . Once you have set up your routes, you can implement the following code:

var app = angular.module('myApp', [])
app.controller('DataController', function($scope, $http) {
    $http.get('https://example-api/data')
        .then(function(response) {
            $scope.data = response.data;
            $state.go('dashboard');
        }, function(error){
            console.log(error);
        });
});

Answer 4

Consider incorporating angular routing into your project for better navigation and user experience. Check out this resource to learn more: You can also find a helpful example here: . Once you have set up your routes, you can implement the following code:

var app = angular.module('myApp', [])
app.controller('DataController', function($scope, $http) {
    $http.get('https://example-api/data')
        .then(function(response) {
            $scope.data = response.data;
            $state.go('dashboard');
        }, function(error){
            console.log(error);
        });
});

Dealing with redirecting to the login page in Angular

Answer №1

Answer №2

Similar questions

The cascade option in TypeORM entities

What steps can be taken to create an electron menu for easily conducting a general search within the current window?

Securing Users with ReactJS and Loopback for Authentication

Issues with the History API in AJAX Requests

Obtain the current date using Moment JS in JavaScript

Discovering the power of Next.js Dynamic Import for handling multiple exportsI hope this

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

What is the best way to retrieve the value from a PHP request?

Locate the parent element that has the smallest amount of space taken up by its child elements

Error message: Upon refreshing the page, the React Router is unable to read properties of

Incorporate new class into preexisting modules from external library

having trouble retrieving 200 status code from Angular server response

Utilizing Google Analytics 4 in a React TypeScript Environment

What is the process for generating a submatch for this specific expression?

Using NextJS to pass a string from an input field to getStaticProps via context

Display time series data from PHP by utilizing Flot Charts in jQuery

How about using jQuery to display information alerts instead of the traditional alert function

VUEJS - Link the output from my function to my sub-template

What are the steps to implementing partial page functionality with the $http service in Angular?

Establishing connectivity between an AngularJS application and Mongodb by utilizing NodeJS