我尝试进行用户登录身份验证，我使用一种方法制作了一个名为 AuthService 的服务，isAuthenticated在该方法中，我调用 API 以交叉检查用户是否已登录(稍后我也会在其中使用用户角色(，然后我在 $rootScope.$on 中调用此服务，但它不会等到我的服务从 API 获取数据， 这是我的应用程序.js
var app = angular.module('myApp', ['ngRoute', 'ui.router', 'ngAnimate', 'toaster', 'ui.bootstrap']);
app.config(['$routeProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider',
function ($routeProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
$stateProvider.
state('/', {
url: "/",
views: {
header: {
templateUrl: 'partials/common/header.html',
controller: 'authCtrl',
},
content: {
templateUrl: 'partials/dashboard.html',
controller: 'authCtrl',
}
},
title: 'Dashboard',
authenticate: true
})
.state('login', {
url: "/login",
views: {
content: {
templateUrl: 'partials/login.html',
controller: 'authCtrl',
}
},
title: 'Login',
authenticate: false
})
.state('dashboard', {
title: 'Dashboard',
url: "/dashboard",
views: {
header: {
templateUrl: 'partials/common/header.html',
controller: 'authCtrl',
},
content: {
templateUrl: 'partials/dashboard.html',
controller: 'authCtrl',
}
},
authenticate: true
});
$urlRouterProvider.otherwise("/");
//check browser support
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}])
.run(function ($rootScope, $location, $state, Data, AuthService) {
$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
$rootScope.title = toState.title;
$rootScope.authenticated = false;
var userInfo = AuthService.isAuthenticated();
if (toState.authenticate && !AuthService.isAuthenticated()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
} else {
alert('here I am ='+$rootScope.authenticated);
}
});
});
这是我的服务
app.factory('AuthService', function ($http, Data, $rootScope) {
var authService = {};
authService.isAuthenticated = function () {
Data.get('index.php/api/authentication/is_login').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
return results.uid;
} else {
return false;
}
});
}
return authService;
});
尝试了很多事情，但到目前为止没有运气，请提出最好的方法，我已经在 ui-routes 中尝试了解决方法，但没有奏效。
提前谢谢。
您当前拥有的实现将不起作用，因为Data.get()函数返回一个Promise，因此是异步的。因此，路由更改将继续进行，而无需等待身份验证服务返回任何值。
若要解决您的问题，应以特定方式处理此异步逻辑：
app.run(function ($rootScope, $location, $state, Data, AuthService) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
/**
* If the user is heading towards a state that requires
* authentication, assume that they are not authenticated,
* and stop them! Otherwise, let them through...
*/
if (toState.authenticate) {
event.preventDefault();
if (toState.name !== fromState.name) {
// Now check whether or not they are authenticated
AuthService.isAuthenticated().then(function () {
// Yes! They're authenticated, continue
$state.go(toState.name, toParams);
}, function () {
// Nope, this user cannot view this page
alert('You cannot view this page!');
});
}
} else {
return;
}
});
}
编辑：我添加了一个检查语句
toState.name !== fromState.name以中断任何重定向循环，这些循环可能会导致对身份验证服务的无休止调用。这是对该问题原始海报的评论的回应。
诀窍是默认情况下阻止路由转换。然后，您可以根据需要执行任意数量的异步逻辑，然后允许用户继续前进。
我建议添加一个微调器或加载窗口，以提醒用户您正在执行此身份验证检查的事实。阻止页面上的任何进一步用户操作也可能是明智的，但这完全取决于您。
请注意，函数AuthService.isAuthenticated()现在返回一个 Promise ，您必须对身份验证服务进行微小更改才能实现此目的。只需像这样包装当前的逻辑：
app.factory('AuthService', function ($http, Data, $rootScope, $q) {
var authService = {};
authService.isAuthenticated = function () {
return $q(function (resolve, reject) {
Data.get('index.php/api/authentication/is_login').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
// Great, the user is authenticated, resolve the Promise
resolve(results.uid);
} else {
// The user does not appear to be authenticated, reject the Promise
reject();
}
});
});
};
return authService;
});
我希望这能解决您的问题，承诺可能很痛苦，但它们也可以是一个非常强大的工具。GitHub上有一个很好的帖子，讨论了围绕这个问题的一些潜在解决方案，可以在这里找到：https://github.com/angular-ui/ui-router/issues/1399。
-
$q： https://docs.angularjs.org/api/ng/service/$q