Best practice for stopping routing in angular

Question

Best practice for stopping routing in angular

I am currently working on an angular application that includes guest functionality. This feature allows me to create a guest account for all unauthorized users in the background. I need to pause routing until the guest account is created and then specify an auth token for all other requests. Currently, I am achieving this by adding a resolve parameter to all routes.

.config(function ($routeProvider) {
    var originalWhen = $routeProvider.when;

    $routeProvider.when = function (path, route) {
        if (path && path.indexOf('sign') === -1) {
            route.resolve = route.resolve || {};
            route.resolve.userSync = ['User', function (User) {
                return User.isSynchronized.promise;
           }];
        }

        return originalWhen.call(this, path, route);
     };
});

However, I feel like there might be a better way to accomplish this. Can anyone offer advice on how to handle this situation more effectively?

javascript angularjs angularjs-routing

Answer 1

Answer №1

If you want to monitor the rootScope locationChangeStart event, here's how you can do it:

.run(['$rootScope', 'User', function ($rootScope, User) {
  $rootScope.isUserLoggedIn = false;

  var stopLocationChangeUnregister = $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
    if ($rootScope.isUserLoggedIn === false && newUrl.indexOf('sign') === -1) {
      event.preventDefault(); // This will stop the navigation from occurring
    }
  });
  User.isSynced.promise.then(function () {
    stopLocationChangeUnregister(); // Call this to unsubscribe your event listener for $locationChangeStart
    //$rootScope.isUserLoggedIn = true; // Alternatively, set isUserLoggedIn to true without unregistering the event
  });
}])

Answer 2

If you want to monitor the rootScope locationChangeStart event, here's how you can do it:

.run(['$rootScope', 'User', function ($rootScope, User) {
  $rootScope.isUserLoggedIn = false;

  var stopLocationChangeUnregister = $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
    if ($rootScope.isUserLoggedIn === false && newUrl.indexOf('sign') === -1) {
      event.preventDefault(); // This will stop the navigation from occurring
    }
  });
  User.isSynced.promise.then(function () {
    stopLocationChangeUnregister(); // Call this to unsubscribe your event listener for $locationChangeStart
    //$rootScope.isUserLoggedIn = true; // Alternatively, set isUserLoggedIn to true without unregistering the event
  });
}])

Best practice for stopping routing in angular

Answer №1

Similar questions

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning

What is the method to obtain an object as the return value from a click function in JavaScript?

When a change is made in the parent component, the local state of the child component in ReactJS is automatically updated

Updating the initialState in your application while employing the useState function with React Hooks

Loading Data into Array - Angular/Ionic

Creating a JSON body using a JavaScript function

Is the callback still triggered even after the off function is called?

Continuously flowing chain of replies from a series of queries using RxJS

My jQuery form is not functioning properly upon initialization

Unable to extract the 'id' property from 'params' object in Next.js 13.4 due to its undefined value

Tips for having <script> update onchange instead of just onload

Node.js user update complete

Juggling various perspectives in a Backbone assortment

The page fails to load completely in headless chrome on Ubuntu 18.04 while using Robot Framework

Error: Unable to access the 'then' property of an undefined object when working with promises

Obtaining an OBJECT from a hashmap instead of a string

Stop the duplication of downloading JavaScript files

Troubleshooting problems with AJAX call in custom validation for Knockout JS

The InjectionToken component is not exported by AngularFire

Hide a div element upon selecting an option from a dropdown menu