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

javascript create smooth transitions when navigating between different pages

Compare several objects or arrays based on a selected array and combine them into a single object containing all matching elements from the selected array

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

Nuxt middleware's redirect function is causing the state to become null

Tips for retrieving specific database entries using a JavaScript function

Unable to locate module - relative file path

Does it typically occur to experience a brief pause following the execution of .innerHTML = xmlhttp.responseText;?

How can one authenticate an express session when sending a POST request?

There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

ng-view is the culprit behind the website's fatal error

Tips for concealing the Google Chrome status bar from appearing on a webpage

Tips for passing the name of a success function as a parameter in an AJAX request

"electron-builder - initially designated for building app for Mac only, but now configured to build for both Mac

Click event in dropdown selection options

Assign a value to the <li> element and modify the prop when the user clicks using vue.js

My PayPal script (and all other JavaScript) was rendered dysfunctional by Onsen UI

Invoking Ajax Within Every Loop

What should be the proper service parameter type in the constructor and where should it be sourced from?

Assign the output of a function to a variable

The HTML code as content