UI-Router Resolve In Infinite Loop On Promise 失败答案

【问题标题】：UI-Router Resolve In Infinite Loop On Promise FailureUI-Router Resolve In Infinite Loop On Promise 失败
【发布时间】：2014-10-16 20:32:31
【问题描述】：

我正在尝试基于身份验证重定向用户，因此在每个路由状态的解析中，我已将我的服务用于检查身份验证，因此在本例中为登录和仪表板。

    .state('login', {
        url: "/login",
        abstract: true,
        templateUrl: '/app/login/login.html'
    })

        // Default login state
        .state('login.index', { 
            url: "",
            templateUrl: "/app/login/views/login.html",
            controller: 'LoginController',
            controllerAs: 'loginCtrl',
            resolve: {
                UserAuth: session
            }
        })

    .state('dashboard', {
        url: "/dashboard",
        abstract: true,
        templateUrl: '/app/dashboard/dashboard.html',
        resolve: {
            UserAuth: session
        }
    })

        // Default dashboard state
        .state('dashboard.index', {
            url: "",
            templateUrl: '/app/dashboard/views/page1.html',
            controller: 'Page1Controller',
            controllerAs: 'page1Ctrl',
            resolve: {
                UserAuth: session
            }
        })

        // with multiple states like the child route above...

在我用于路由的 .config 中，我还设置了上面使用的会话，它在承诺成功或会话存在时 $state.go 到仪表板，否则在承诺失败时 $state.go 到登录。

.config(function($stateProvider, $urlRouterProvider) {

    var session = ['$q', '$location', '$state', 'SessionService', 
        function( $q, $location, $state, SessionService ) {
            return SessionService.session()

                .then(function( session ) {

                    // Check location path as $state is not resolved yet
                    var location = $location.path();

                    /**
                     * Check user authentication to dashboard and handle
                     * state change if session already exists
                     */
                    if( location.indexOf('login') === 1 ) {
                        // Redirect to default dashboard view
                        $state.go('dashboard.index');
                    }

                }, function( error ) {

                    // Check location path as $state is not resolved yet
                    var location = $location.path();

                    /**
                     * Check for unauthorized access to dashboard and handle
                     * state change if not located on login view
                     */
                    if( location.indexOf( 'dashboard' ) === 1 ) {
                        // Redirect to default login view
                        $state.go('login.index');
                    }

                    // Don't propagate error since it has been handled and it prevents page
                    // return $q.reject( error );
                });
        }];

但是，当我让会话超时时，它会通过 403 错误的无限循环运行，这是对承诺失败的正确服务器响应。它进入 if 语句，并运行 $state.go('login.index')，但一直循环并且永远不会用登录替换状态。谁能看到我做错了什么？适用于所有情况，除了会话超时，然后不重定向。

【问题讨论】：

好吧，我可以想象出了什么问题，login.index 路由解析了 SessionService 返回的任何内容，它返回成功，因为您的后端登录路由可能未经过身份验证，它重定向到 dashboard.index，身份验证失败，重定向到 login.index，冲洗并重复。只是一个猜测，但这可能是发生了什么......
是的，我已经用 $location.replace(); 将 $state.go 更改为 $location.path('/login');它似乎纠正了它。我认为不返回 $q.reject 将表明错误已被处理并允许路由解决，但注意到它不会在返回之前使用 $state.go 到达那里。感谢您成为一个共鸣板。
很高兴我能帮上忙！如果您有兴趣，许多人会使用 HTTP 拦截器来做类似的事情。可能也有一些示例代码挂在某个地方;-)
谢谢，如果您有时间，我肯定有兴趣了解您如何使用 HTTP 拦截器处理此问题。

标签： javascript angularjs angular-ui-router

【解决方案1】：

我将一些我在过去项目中使用的代码放在一起，这些代码显示了我如何在 Angular 方面设置身份验证和拦截 401/403。

https://gist.github.com/jfornoff/4637069c398dc2f5b881

请注意，尤其是用户的授权不能在前端可靠地完成，并且始终让您的后端进行身份验证，并且不要盲目地向您的前端应该使用的某个端点提供数据;-) 但我想这很自我-解释性的。

希望能帮到你！再见，一月

【讨论】：