如何检查认证和自动重定向到登录界面与路由器的状态？ [英] How to check authentication and automatically redirect to login state with ui-router?

问题描述

所以我在此angularjs功能我运行（运行AngularJS v1.2.26）

so I have this function in my run in angularjs (running AngularJS v1.2.26)

.run(function(....) {
    authService.authCheck();

    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (next.requireLogin) {
            if (!authService.isLoggedIn()) {
                $location.path('/login');
                event.preventDefault();
            }
        }
    });

})...

在直接访问需要身份验证例如一个网址 http://127.0.0.1:8080/secret ，该函数总是重定向到登录路径，同时计算为false所有的时间调试它的后明确。默认情况下访问页面时，然后将它运行没有任何问题指明路线。

when directly accessing a URL that requires authentication e.g. http://127.0.0.1:8080/secret, the function always redirects to the login path, clearly after debugging it for a while it evaluates to false all the time. when accessing default page then going to the specified route it runs without any problems.

这是一部分我的 authService

this.authCheck = function() {
    $http({
        method: 'PUT',
        url: '/api/login'
    }).
    success(function(data, status, headers, config) {
        if (status === 200) {
            userIsAuthenticated = true;
        } else {
            userIsAuthenticated = false;
        }
        $rootScope.loginStatus = userIsAuthenticated;
    }).
    error(function(data, status, headers, config) {
        userIsAuthenticated = false;
        $rootScope.loginStatus = userIsAuthenticated;
    });
};

this.isLoggedIn = function() {
    return userIsAuthenticated;
};

所以每次我有一个破发点时间！authService.isLoggedIn（）我看到它的计算结果为假，即使在运行块中的函数试图对其进行身份验证前到达的功能 $ rootScope。$。

So every time I have a break point on !authService.isLoggedIn() I see that it evaluates to false even though the function in the run block tries to authenticate it before reaching the $rootScope.$on function.

到底什么是$ P $被永久pventing userIsAuthenticated 变量的状态？

What exactly is preventing the state of userIsAuthenticated variable from being persistent?

推荐答案

的 .authCheck 在 authService 是直到它实际上完成的第一次同步，这意味着 userIsAuthenticated 将不会被设置为true。如果你按照你目前的路线，你必须写一些更复杂的code等待如果检查没有完成尚未然后重定向。然而，这是一个混乱的次优选择。

The .authCheck in your authService is asynchronous, which means that userIsAuthenticated won't be set to true until it actually finishes for the first time. If you followed the route you're on now, you'd have to write some more complex code for waiting if the check isn't completed yet and then redirecting. However, that's a messy sub-optimal option.

去这里最好的办法就是让 UI路由器工作了这一点给你。您的所有国家需要登录，例如创建一个共同的祖先状态会话。然后，让该州的分辨率等使用决心选项您的认证检查。如果没有通过身份验证，创建一个特定的状态转移抑制误差，您可以在其他地方渔获物和行为时（重定向登录）。

The best way to go here is to let ui-router work this out for you. Create a common ancestor state for all your states that require login, e.g. 'session'. Then make that state's resolution wait for your authentication check using resolve option. If not authenticated, create a specific state transfer rejection error, which you can elsewhere catch and act upon (redirect to login).

.state('session', {
    resolve: {
        authentication: ['authService', '$q', function (authService, $q) {
            return authService.checkAuthentication.then(function () {
                if (!authService.isAuthenticated) {
                    return $q.reject({
                        notAuthenticated: true
                    });
                }
            });
        }]
    },
    // ...
})
.state('secret', {
    parent: 'session',
    // ...
});

然后

$rootScope.$on('$stateChangeError', function (_0, _1, _2, _3, _4, error) {
    if (error.notAuthenticated) {
        $state.go('login');
    }
});

（你需要正确地从认证检查返回以及）

(you'll need to properly return from your authentication check as well)

checkAuthentication: function () {
    return $http({...})
        .success(...)
        .error(...);
}

这篇关于如何检查认证和自动重定向到登录界面与路由器的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！