AngularJS 中的用户认证

在本文中，我们将介绍如何使用AngularJS和Symfony2进行用户认证。
AngularJS是一个流行的JavaScript框架，用于前端开发，而Symfony2是一个PHP框架，用于后端开发。结合使用这两个框架，可以轻松实现用户认证功能。

阅读更多：AngularJS 教程

步骤1：设置Symfony2后端

首先，在Symfony2后端设置用户认证功能。我们可以使用Symfony安全组件来处理用户认证。创建一个User实体类，并在UserRepository中添加用于查询用户的方法。然后，创建一个LoginController来处理用户登录请求。在该控制器中，我们将使用Symfony的表单组件来构建登录表单，并处理用户提交的表单数据。最后，在security.yml文件中配置安全规则，以确保只有经过身份验证的用户可以访问特定的页面或资源。

下面是一个示例代码片段，展示了如何在Symfony2中设置用户认证：

// User实体类
class User
{
    // 属性和方法
}

// UserRepository
class UserRepository extends EntityRepository
{
    public function findUserByUsername( $username) { return$ this->findOneBy(['username' =>  $username]); } } // LoginController class LoginController extends Controller { public function loginAction(Request$ request)
    {
         $form =$ this->createForm(LoginType::class);

        // 处理用户提交的登录表单数据
         $form->handleRequest($ request);

        // 进行用户认证

        // ...

        return $this->redirectToRoute('homepage');
    }
}

// security.yml
security:
    providers:
        our_database_provider:
            entity:
                class: AppBundle:User
                property: username
    firewalls:
        main:
            ...
            form_login:
                login_path: /login
                check_path: /login_check
            ...

步骤2：设置AngularJS前端

接下来，我们需要在AngularJS前端实现用户认证功能。在AngularJS中，我们可以使用$http服务来向Symfony2后端发送请求。在登录页面中，我们会发送POST请求来验证用户提交的凭据，并从Symfony2后端接收响应。如果身份验证成功，我们可以将用户信息保存在客户端的本地存储中，并将用户重定向到登录后的页面。

下面是一个示例代码片段，展示了如何在AngularJS中设置用户认证：

// 在登录页面Controller中发送POST请求
 $http.post('/login_check', { username:$ scope.username, password:  $scope.password }) .then(function(response) { // 身份验证成功 localStorage.setItem('userToken', response.data.token);$ location.path('/dashboard');
    }, function(error) {
        // 身份验证失败
         $scope.errorMessage = "Invalid username or password"; }); // 在应用启动时检查用户是否已经登录 if (localStorage.getItem('userToken')) {$ http.defaults.headers.common.Authorization = localStorage.getItem('userToken');
}

步骤3：保护页面和资源

现在，我们已经设置了用户认证功能，接下来是保护页面和资源，以确保只有经过身份验证的用户可以访问。在Symfony2中，我们可以使用security.yml文件中的access_control配置来定义安全规则。

下面是一个示例代码片段，展示了如何在Symfony2中保护页面和资源：

access_control:
    - { path: ^/dashboard, roles: ROLE_USER }
    - { path: ^/admin, roles: ROLE_ADMIN }

在上述代码中，^/dashboard和^/admin都是受保护的URL路径，只有经过身份验证且具有对应角色的用户才能访问这些路径。

在AngularJS中，我们可以使用一个拦截器来检查每个HTTP请求的用户身份验证。如果用户未经过身份验证或身份验证失效，我们可以将用户重定向到登录页面。

下面是一个示例代码片段，展示了如何在AngularJS中保护页面和资源：

// 在应用启动时检查用户是否已经登录
if (localStorage.getItem('userToken')) {
     $http.defaults.headers.common.Authorization = localStorage.getItem('userToken'); } else {$ location.path('/login');
}

// 对每个HTTP请求进行拦截
 $http.interceptors.push(function($ q,  $location) { return { 'responseError': function(response) { if (response.status === 401) {$ location.path('/login');
            }
            return $q.reject(response);
        }
    };
});