javascript - AngularJS - 防止未经身份验证的用户访问给定的路由

Question

在我的应用程序中，当用户登录时，我有 authService 设置内部标志 isAuthenticated。现在，在每次路由更改时，我都会将监听器附加到 $routeChangeStart 事件，该事件会检查 authService.isAuthenticated()。如果不是，它应该重定向到登录路由。

问题是当用户刷新页面时(所有 authService 设置都丢失了)并且它再次返回登录(同时在服务器上仍然有有效 session )。这不是我想要的。

我想做的是“阻止”路由更改，直到我获得用户已通过身份验证的信息(来自 authService ，这将是即时的，或者如果没有可用信息，则来自服务器在 authService 中，例如刷新后)。我在authService

中有这样的功能

        // returns promise
        currentUser: function() {
            if (authService.isAuthenticated()) {
                return $q.when(authService.loggedUser);
            }
            return $http.get('/session').then(function(response) {
                authService.loggedUser = response.user;
                return $q.when(authService.loggedUser);
            });
        }

并想在事件监听器中使用它。

    $rootScope.$on("$routeChangeStart", function (event, next, current) {
        if(isRouteRestricted(next)) {
            authService.currentUser().then(null, function() {
                $location.path('/login');
            });
        }
    });

问题是它没有按预期工作。我仍然在很短的时间内看到目标路线，然后用户被重定向。我相信这是由于 promise 的性质，但如何摆脱这种“眨眼”效应？

Answer 1

我会在顶层 Controller 中做类似的事情，这将是刷新页面时调用的第一个 Controller (为 js 中的拼写错误道歉，我是 coffeescript 专家):

var authCheck = function (event, next, current) {
    if(isRouteRestricted(next)) {
        authService.currentUser().then(null, function() {
            $location.path('/login');
        });
    }
}

authCheck(null, populateNextSomehow).then(function () {
    // all of your controller code, probably in a separate function
});

$rootScope.$on("$routeChangeStart", authCheck);

这将确保在 authCheck 完成之前无法调用 Controller 代码。