ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – $state.go无法使用promise

2019-06-09 15:25:46  阅读:285  来源: 互联网

标签:javascript angularjs promise angular-promise angular-http


我正在尝试实施基本安全检查,以阻止用户访问某些状态,具体取决于他们的权限集:

'use strict';

var autoExecApp = angular.module("myApp", ['ui.router']);

autoExecApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('index', {
            url: '/index',
            templateUrl: 'partials/index.html'
        })
        .state('permission', {
            url: '/permission',
            templateUrl: 'partials/permissions.html'
        });
}]);

autoExecApp.run(['$rootScope', '$state', '$userRoles', function($rootScope, $state, $userRoles) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

        event.preventDefault(); // prevent page from being loaded anyway
        $userRoles.hasPermissions(toState.name).then(function(data) {
            var result = data === "true";
            if (!result) {
                $state.go('permission');
            }
            else {
                $state.go(toState.name, toParams ,{notify:false});
            }
        });
    });
}]);

现在问题围绕着我的状态变化发生在承诺内部的事实.我很乐意让它同步 – 因为它确实应该在这种情况下,但我很困惑为什么它不是异步工作.

如果我在promise中移动event.preventDefault(),它就可以了.但是状态改变分为两步.首先,它将始终转到原始页面,然后在转换到“已阻止”页面后很快(如果它被阻止).我收集这是因为它从$on成功返回一次并更新状态,然后在从promise返回时再次更新它.

如果承诺是你如何看待它,状态将不会改变.一切似乎都有效,但页面不会更新视图.我不确定为什么会这样.出于某种原因,如果未阻止事件,则稍后的状态更改将起作用.但是,如果它被阻止并且从返回的promise中调用$state.go,则更新$state似乎为时已晚.

编辑:我使用广播解决方案取得了成功,这就是它的样子:

event.preventDefault();
$state.go(toState.name, toParams, {notify: false}).then(function() {
     // line 907 state.js
     $rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
});

显然由于它是一个承诺,preventDefault();从自然射击中抑制这个’$stateChangeSuccess’.手动执行它可以恢复预期的行为.

解决方法:

这是一个已知的问题.
一般工作的解决方法是从’$stateChangeStart’处理程序中广播自定义事件,然后从该自定义事件的处理程序中进行状态转换.

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

    event.preventDefault(); // prevent page from being loaded anyway
    $userRoles.hasPermissions(toState.name).then(function(data) {
        var result = data === "true";
        if (!result) {

            $rootScope.$broadcast('goToPermission');
        }
        else {
            $rootScope.$broadcast('goToState', toState.name);
        }
    });
});

借来自:
https://github.com/angular-ui/ui-router/issues/178#issuecomment-49156829

标签:javascript,angularjs,promise,angular-promise,angular-http
来源: https://codeday.me/bug/20190609/1205566.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有