AngularJS 单页应用 (SPA) 中的路由控制和权限管理

随着前端技术的不断发展，越来越多的网站采用了单页应用 (Single-Page Application，SPA) 的架构。SPA 可以让用户在不刷新页面的情况下，享受到更加流畅的交互体验。而 AngularJS 是一个非常流行的前端框架，它提供了强大的路由控制和权限管理功能，帮助我们构建高质量的 SPA。

路由控制

在 SPA 中，路由控制非常重要。我们需要通过路由控制，让用户能够在不同的页面之间进行切换。在 AngularJS 中，可以通过 $routeProvider 来进行路由控制。

首先，我们需要在 HTML 中定义一个容器，用来显示不同的页面：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>My SPA</title>
</head>
<body ng-controller="mainCtrl">
  <div ng-view></div>

  <script src="angular.js"></script>
  <script src="app.js"></script>
</body>
</html>

在 ng-view 中，我们将会显示不同的页面。

接下来，我们需要在 JavaScript 中定义路由：

// www.javascriptcn.com code example
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home.html',
        controller: 'homeCtrl'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'aboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .controller('mainCtrl', function($scope) {
    // ...
  })
  .controller('homeCtrl', function($scope) {
    // ...
  })
  .controller('aboutCtrl', function($scope) {
    // ...
  });

在 config 中，我们定义了不同的路由。其中，when 表示当 URL 匹配某个路径时，应该加载哪个页面。templateUrl 表示页面的模板，controller 表示页面的控制器。otherwise 表示当 URL 不匹配任何已定义的路径时，应该重定向到哪个路径。

在 controller 中，我们可以定义每个页面的控制器。控制器中可以定义页面的行为和数据模型。

权限管理

在 SPA 中，权限管理也非常重要。我们需要根据用户的角色和权限，来控制哪些页面和功能可以被访问。在 AngularJS 中，可以通过 ng-if 和 ng-show 来进行权限管理。

首先，我们需要定义一个服务，用来获取当前用户的信息：

// www.javascriptcn.com code example
angular.module('myApp')
  .factory('userService', function() {
    var user = null;

    function getUser() {
      return user;
    }

    function setUser(newUser) {
      user = newUser;
    }

    return {
      getUser: getUser,
      setUser: setUser
    };
  });

在服务中，我们定义了一个 user 变量，用来存储当前用户的信息。我们还定义了两个方法，用来获取和设置当前用户的信息。

接下来，我们可以在页面中使用 ng-if 和 ng-show 来进行权限管理：

// www.javascriptcn.com code example
<div ng-controller="mainCtrl">
  <div ng-if="userService.getUser().role === 'admin'">
    <a href="#/admin">Admin Panel</a>
  </div>
  <div ng-show="userService.getUser().loggedIn">
    <a href="#/profile">My Profile</a>
  </div>
  <div ng-show="!userService.getUser().loggedIn">
    <a href="#/login">Log In</a>
  </div>
</div>

在上面的例子中，我们根据当前用户的角色和登录状态，来显示不同的页面和功能。在 ng-if 和 ng-show 中，我们使用了 userService.getUser() 方法来获取当前用户的信息。

在控制器中，我们可以通过 userService.setUser() 方法来设置当前用户的信息：

// www.javascriptcn.com code example
angular.module('myApp')
  .controller('mainCtrl', function($scope, userService) {
    var user = {
      loggedIn: true,
      role: 'user'
    };

    userService.setUser(user);
  });

在上面的例子中，我们定义了一个名为 user 的对象，表示当前用户的信息。我们使用 userService.setUser() 方法来设置当前用户的信息。

示例代码

下面是一个完整的示例代码，包含了路由控制和权限管理的功能：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>My SPA</title>
</head>
<body ng-controller="mainCtrl">
  <div ng-if="userService.getUser().role === 'admin'">
    <a href="#/admin">Admin Panel</a>
  </div>
  <div ng-show="userService.getUser().loggedIn">
    <a href="#/profile">My Profile</a>
  </div>
  <div ng-show="!userService.getUser().loggedIn">
    <a href="#/login">Log In</a>
  </div>

  <div ng-view></div>

  <script src="angular.js"></script>
  <script src="app.js"></script>
</body>
</html>

// www.javascriptcn.com code example
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home.html',
        controller: 'homeCtrl'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'aboutCtrl'
      })
      .when('/admin', {
        templateUrl: 'admin.html',
        controller: 'adminCtrl'
      })
      .when('/profile', {
        templateUrl: 'profile.html',
        controller: 'profileCtrl'
      })
      .when('/login', {
        templateUrl: 'login.html',
        controller: 'loginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .factory('userService', function() {
    var user = null;

    function getUser() {
      return user;
    }

    function setUser(newUser) {
      user = newUser;
    }

    return {
      getUser: getUser,
      setUser: setUser
    };
  })
  .controller('mainCtrl', function($scope, userService) {
    var user = {
      loggedIn: true,
      role: 'user'
    };

    userService.setUser(user);
  })
  .controller('homeCtrl', function($scope) {
    $scope.message = 'Welcome to My SPA!';
  })
  .controller('aboutCtrl', function($scope) {
    $scope.message = 'About Us';
  })
  .controller('adminCtrl', function($scope) {
    $scope.message = 'Admin Panel';
  })
  .controller('profileCtrl', function($scope) {
    $scope.message = 'My Profile';
  })
  .controller('loginCtrl', function($scope) {
    $scope.message = 'Log In';
  });

在上面的例子中，我们定义了五个页面：home.html、about.html、admin.html、profile.html 和 login.html。在 config 中，我们定义了每个页面的路径和控制器。在 mainCtrl 中，我们设置了当前用户的信息。在每个控制器中，我们定义了页面的行为和数据模型。在 HTML 中，我们使用了 ng-if 和 ng-show 来进行权限管理。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d417aea941bf71347bfd64