如何在AngularJS的$routeProvider中按角色为同一URL切换模板URL？

Hey there, I totally get the frustration—spending hours hunting for a solution that fits your exact business need (same URL, different templates for regular users vs auditors) and coming up empty. Let’s break down two solid approaches to make this work with AngularJS’s $routeProvider.

Approach 1: Use templateProvider for Dynamic Template Selection #

This method leverages templateProvider to dynamically fetch the right template based on the logged-in user’s role. It’s clean and keeps everything tied to the single /home route.

$routeProvider
  .when('/home', {
    templateProvider: function(AuthService, $templateRequest) {
      // Assume AuthService exposes a method to get the current user's role
      const userRole = AuthService.getCurrentUser().role;
      // Pick the template URL based on role
      const templatePath = userRole === 'auditor' 
        ? 'views/pages/home/auditor-home-page-view.html' 
        : 'views/pages/home/home-page-view.html';
      // Fetch and return the template
      return $templateRequest(templatePath);
    },
    controller: 'HomePageController',
    resolve: {
      loggedin: checkLoggedin,
      // Ensure user data is loaded before resolving the route
      user: function(AuthService) {
        // If fetching user data is async, return the promise here
        return AuthService.getCurrentUser();
      }
    }
  });

How this works: #

• templateProvider replaces the static templateUrl—it lets you run logic to decide which template to load.
• $templateRequest handles loading the template file from the URL you specify, returning a promise that AngularJS will wait for.
• The resolve block’s user entry ensures we have the user’s role data ready before the template provider runs, preventing race conditions.

Approach 2: Dynamic Template + Controller (For Role-Specific Logic) #

If your auditors need a completely different controller along with their template, use controllerProvider alongside a dynamic templateUrl:

$routeProvider
  .when('/home', {
    templateUrl: function($injector) {
      const AuthService = $injector.get('AuthService');
      const userRole = AuthService.getCurrentUser().role;
      return userRole === 'auditor' 
        ? 'views/pages/home/auditor-home-page-view.html' 
        : 'views/pages/home/home-page-view.html';
    },
    controllerProvider: function($injector) {
      const AuthService = $injector.get('AuthService');
      const userRole = AuthService.getCurrentUser().role;
      // Return the controller name matching the user's role
      return userRole === 'auditor' ? 'AuditorHomeController' : 'HomePageController';
    },
    resolve: {
      loggedin: checkLoggedin,
      user: function(AuthService) {
        // Async-friendly: return a promise if fetching user data from an API
        return AuthService.getCurrentUser();
      }
    }
  });

Key Notes: #

• Make sure your AuthService reliably returns the user’s role. If you’re fetching user data from an API, ensure getCurrentUser() returns a promise—this will make the resolve block wait for the data to load before proceeding.
• You can ditch the separate /auditor-home route entirely now—all users will hit /home and get the correct template/controller based on their role.

内容的提问来源于stack exchange，提问作者Son Pham