AngularJS 1.6应用全局头部登录功能实现及代码复用咨询

Great question! Let's break this down step by step—you can absolutely reuse your existing login code while moving the form to a global header, and I'll walk you through how to do it without breaking anything, plus cover core AngularJS login best practices with your CodeIgniter backend.

第一步：重构登录逻辑到全局服务（Service） #

AngularJS Services是单例对象，全局可用，正好适合封装可复用的登录逻辑。把你原来homeCtrl.js里的登录API调用、用户状态管理全部迁移到这里：

angular.module('yourApp').service('AuthService', ['$http', '$window', function($http, $window) {
  // 持久化存储用户状态（页面刷新也不会丢失）
  let currentUser = JSON.parse($window.localStorage.getItem('appCurrentUser')) || null;

  // 复用原登录逻辑：对接CodeIgniter后端API
  this.login = function(credentials) {
    return $http.post('/api/login', credentials)
      .then(response => {
        // 登录成功后存储用户信息到localStorage
        currentUser = response.data;
        $window.localStorage.setItem('appCurrentUser', JSON.stringify(currentUser));
        return currentUser;
      })
      .catch(error => {
        // 统一处理登录错误
        throw error.data?.message || '登录失败，请检查账号密码';
      });
  };

  // 获取当前登录用户
  this.getCurrentUser = function() {
    return currentUser;
  };

  // 登出方法（按需添加）
  this.logout = function() {
    currentUser = null;
    $window.localStorage.removeItem('appCurrentUser');
  };
}]);

第二步：创建全局头部组件（Component） #

因为头部要在所有页面显示，用AngularJS Component封装最适合，它自带模板和控制器，方便复用：

1. 头部组件控制器 #

angular.module('yourApp').component('appGlobalHeader', {
  templateUrl: 'templates/global-header.html',
  controller: ['AuthService', '$scope', function(AuthService, $scope) {
    const vm = this;
    vm.credentials = { username: '', password: '' };
    vm.loginError = '';
    vm.currentUser = AuthService.getCurrentUser();

    // 调用AuthService的登录方法
    vm.handleLogin = function() {
      AuthService.login(vm.credentials)
        .then(user => {
          vm.loginError = '';
          vm.credentials = { username: '', password: '' };
          // 发送全局事件，通知其他页面用户已登录
          $scope.$emit('userLoggedIn', user);
        })
        .catch(error => {
          vm.loginError = error;
        });
    };

    // 登出操作
    vm.handleLogout = function() {
      AuthService.logout();
      vm.currentUser = null;
      $scope.$emit('userLoggedOut');
    };

    // 监听全局登录/登出事件，更新头部状态
    $scope.$on('userLoggedIn', (_, user) => {
      vm.currentUser = user;
    });

    $scope.$on('userLoggedOut', () => {
      vm.currentUser = null;
    });
  }]
});

2. 头部模板（templates/global-header.html） #

<header class="app-header">
  <div class="header-brand">你的应用名称</div>
  
  <!-- 未登录状态：显示登录表单 -->
  <div ng-if="!$ctrl.currentUser" class="login-form">
    <form ng-submit="$ctrl.handleLogin()">
      <input type="text" ng-model="$ctrl.credentials.username" placeholder="用户名" required>
      <input type="password" ng-model="$ctrl.credentials.password" placeholder="密码" required>
      <button type="submit">登录</button>
      <div ng-if="$ctrl.loginError" class="error-text">{{ $ctrl.loginError }}</div>
    </form>
  </div>

  <!-- 已登录状态：显示用户信息和登出按钮 -->
  <div ng-if="$ctrl.currentUser" class="user-info">
    <span>欢迎，{{ $ctrl.currentUser.username }}</span>
    <button ng-click="$ctrl.handleLogout()">登出</button>
  </div>
</header>

第三步：复用原首页登录功能（保留原有逻辑） #

修改homeCtrl.js，让它依赖AuthService，复用同一套登录逻辑，这样原首页的登录表单依然可以正常工作：

angular.module('yourApp').controller('HomeCtrl', ['AuthService', '$scope', function(AuthService, $scope) {
  const vm = this;
  vm.credentials = { username: '', password: '' };
  vm.loginError = '';
  vm.currentUser = AuthService.getCurrentUser();

  vm.login = function() {
    AuthService.login(vm.credentials)
      .then(user => {
        vm.loginError = '';
        $scope.$emit('userLoggedIn', user);
        // 首页登录成功后的额外操作（比如跳转到仪表盘）
      })
      .catch(error => {
        vm.loginError = error;
      });
  };

  // 同步用户状态变化
  $scope.$on('userLoggedIn', (_, user) => {
    vm.currentUser = user;
  });
}]);

第四步：CodeIgniter后端对接要点 #

确保你的CodeIgniter登录API返回标准化的JSON响应，示例代码如下：

class Api extends CI_Controller {
  public function login() {
    $this->load->library('form_validation');
    $this->form_validation->set_rules('username', '用户名', 'required');
    $this->form_validation->set_rules('password', '密码', 'required');

    if ($this->form_validation->run() === FALSE) {
      $this->output->set_status_header(400);
      echo json_encode(['message' => validation_errors()]);
      return;
    }

    $username = $this->input->post('username');
    $password = $this->input->post('password');

    // 查询数据库验证用户
    $this->load->model('User_model');
    $user = $this->User_model->get_user_by_username($username);

    if (!$user || !password_verify($password, $user['password'])) {
      $this->output->set_status_header(401);
      echo json_encode(['message' => '用户名或密码错误']);
      return;
    }

    // 移除敏感字段，返回安全的用户信息
    unset($user['password']);
    echo json_encode($user);
  }
}

额外优化：路由守卫（保护私有页面） #

如果需要限制未登录用户访问某些页面，可以用AngularJS路由的resolve属性实现：

angular.module('yourApp').config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    })
    .when('/dashboard', {
      templateUrl: 'templates/dashboard.html',
      controller: 'DashboardCtrl',
      resolve: {
        authCheck: ['AuthService', '$window', function(AuthService, $window) {
          if (!AuthService.getCurrentUser()) {
            // 未登录则跳转到首页
            $window.location.href = '/';
          }
        }]
      }
    });
}]);

内容的提问来源于stack exchange，提问作者Aditya Varma