问题可能是因为认证过程的异步性质,导致第一次单击时未能完成认证。可以采取以下步骤解决此问题:
将认证过程放入一个函数中,在页面加载时即调用该函数。
确保在认证成功后,更新 Angular $scope 变量,使页面可以直接观察到认证结果。
在 Angular $scope 变量更改后立即执行所需的操作,如更改用户界面等。
代码示例:
// 在控制器中定义登录函数 $scope.login = function () { AuthService.login($scope.username, $scope.password) .then(function (response) { // 更新 $scope 变量使视图能够立即响应 $scope.isAuthorized = AuthService.isAuthenticated(); }) .catch(function (error) { // 处理错误 $scope.errorMessage = error.message; }); };
// 在 AuthService 中定义登录函数 function login(username, password) { return $http.post('/api/login', { username: username, password: password }) .then(function (response) { // 对于成功的认证,将 JWT 存储在本地 localStorage.setItem('jwt', response.data.token); }); }
// 在 AuthService 中定义 isAuthenticated 函数 function isAuthenticated() { // 根据本地存储检查用户是否已经成功认证 return !!localStorage.getItem('jwt'); }