AngularJS - prevent不能访问特定的路线身份验证的用户 [英] AngularJS - prevent not authenticated user from accessing given routes

问题描述

在我的应用程序时登录的用户在我的 authService 它设置内部标记 isAuthenticated 。现在，每一个路由改变我必须添加监听到检查 $ routeChangeStart 事件 authService.isAuthenticated（）。如果没有它应该重定向到登录路线。

In my app when user is logged in I have authService which sets internal flag isAuthenticated. Now on every route change I have listener attached to $routeChangeStart event which checks authService.isAuthenticated(). If no it should redirect to login route.

问题是，当用户进行页面刷新（所有的 authService 设置丢失），它回来再次登录（同时还具有对服务器有效的会话）。这不是我想要的。

Problem is when user makes page refresh (all the authService settings are lost) and it gets back to login again (while still having valid session on server). This is not what I want.

我想要做的是堵的路线改变，直到我得到的信息，如果用户通过验证（无论是从 authService 这将是直接的，还是从服务器如果没有信息是在 authService 可用，如刷新后）。我在 authService

What I'd like to do is to "block" route change until I get the info if user is authenticated (either from authService which would be immediate, or from server if no info is available in authService, e.g. after refresh). I have such function in 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);
            });
        }

和想在事件监听器来使用它。

and would like to use it in event listener.

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

的事情是，预期这是行不通的。我仍然得到目标路径可见于很短的时间，然后用户被重定向。我相信这是由于承诺的性质，但如何摆脱这种闪烁的效果？

The thing is that it doesn't work as expected. I still get the target route visible for a very short time, and then user gets redirected. I believe it is due to nature of promises, but how to get rid of this "blink" effect?

推荐答案

我会做在顶级控制器的这样的事情，这将是被称为第一个控制器刷新页面时， （在js错别字道歉，我是一个CoffeeScript的家伙）：

I'd do something like this in the top level controller, which would be the first controller that's called when the page is refreshed (apologize for typos in the js, I'm a coffeescript guy):

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);

这将确保控制器code不能被称为直到authCheck完成。

This will ensure that the controller code cannot be called until the authCheck is complete.

这篇关于AngularJS - prevent不能访问特定的路线身份验证的用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！