Angular后台路由保护问题：运行时出现未捕获类型错误

Hey there! Let's dig into why your admin auth guard is throwing runtime errors even though your code compiles without issues. Since you're working with AngularJS 1.7.5 (from the script snippet shared), here are the most common issues to check first:

Common Pitfalls & Fixes #

1. Missing or Incorrect Dependency Injection #

AngularJS relies heavily on proper dependency injection—if you're using services like $location, $rootScope, or $http in your guard but haven't injected them, you'll get runtime undefined errors.

Correct Injection Example:

angular.module('yourAppName')
  .factory('adminAuthGuard', ['$rootScope', '$location', function($rootScope, $location) {
    return {
      canActivate: function() {
        // Check if the current user has admin privileges
        if (!$rootScope.currentUser || !$rootScope.currentUser.isAdmin) {
          $location.path('/login');
          return false;
        }
        return true;
      }
    };
  }]);

2. Misconfigured Route Guard Setup #

If you're using UI-Router (the standard routing library for AngularJS), make sure you're correctly referencing the guard in your state definition. The canActivate property needs to inject the guard and return its result (either a boolean or a promise for async checks).

Correct Route Configuration Example:

angular.module('yourAppName')
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('admin', {
        url: '/admin',
        templateUrl: 'templates/admin-dashboard.html',
        controller: 'AdminController',
        canActivate: ['adminAuthGuard', function(adminAuthGuard) {
          // Return the guard's canActivate result
          return adminAuthGuard.canActivate();
        }]
      });
  }]);

3. Unhandled Asynchronous Checks #

If your permission logic involves async operations (like fetching user roles from an API), canActivate must return a promise instead of a raw boolean. Failing to do this will cause the guard to block the route before the async operation completes.

Async Guard Example:

canActivate: function() {
  return $http.get('/api/current-user')
    .then(function(response) {
      const user = response.data;
      if (user.isAdmin) {
        return true; // Allow route access
      } else {
        $location.path('/unauthorized');
        return false;
      }
    })
    .catch(function(error) {
      console.error('Failed to fetch user data:', error);
      $location.path('/login');
      return false;
    });
}

4. Check Console Error Details #

Even without seeing your exact error, here are some common runtime messages and their fixes:

• ReferenceError: [ServiceName] is not defined: You forgot to inject the service in your guard or route config.
• TypeError: Cannot read property 'isAdmin' of undefined: Your currentUser object isn't initialized (make sure it's set when the user logs in).
• Error: [$injector:unpr] Unknown provider: adminAuthGuardProvider: Your guard service isn't registered with your AngularJS module.

Next Steps #

To get a precise fix, could you share:

• The exact error message from your browser's console
• Your full adminAuthGuard service code
• Your route configuration for the admin routes

That way we can pinpoint exactly what's going wrong!

内容的提问来源于stack exchange，提问作者Swagata Roy