防止 URL 根据 HTTP 请求在 AngularJS 中进行未经授权的更改

Question

我试图根据到授权端点的 HTTP GET 结果阻止在 AngularJS 中的导航（这与我的 Spring 安全架构有关，但这对这个问题并不重要） .

我已将以下内容附加到附加到我的顶级模块的运行() 块：

    $rootScope.$on("$locationChangeStart", function(event, newUrl, oldUrl) {

        var path = $location.path();
        $http.get('/svc/authorize/view?urlPath=' + path).then(response => {
            if (response.data.result === "NOT_AUTHORIZED") {
                event.preventDefault();
                console.log("Prevented unauthorized location change");
                $ui.showError("Unable to Navigate to " + newUrl);
            }

        });
    });

（注意：$ui 是我们的服务，不是 AngularJS 或第三方工具）。

不幸的是，由于异步 $http.get()，页面在调用完成之前加载。

如果有帮助，这里是我们的路由定义示例：

    $routeProvider.when('/problem', {
        templateUrl: '/app/management/problem/problem.tmpl.html',
        controller: 'problemCtrl'
    });

谁能帮帮我？我希望我只是在处理异步调用时犯了一个愚蠢的错误。

Answer 1

通常在路由中使用resolve函数来防止加载未经授权的路由。

$routeProvider.when('/problem', {
    templateUrl: '/app/management/problem/problem.tmpl.html',
    controller: 'problemCtrl',
    resolve: {
        authorized: function($http) {
            return $http(someUrl).then(function(response) {
                var data = response.data;
                if (response.data.result === "NOT_AUTHORIZED") {
                    console.log("Prevented unauthorized location change");
                    throw "NOT AUTHORIZED";
                };
                //ELSE
                return data;
            });
        }
    }
});

当 resolve 函数 return 承诺时，路由器将在实例化控制器之前等待承诺被解决或拒绝。如果所有承诺都成功解决，则注入已解决承诺的值并触发 $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError 事件。

有关详细信息，请参阅

AngularJS ngRoute $routeProvider API Reference - .when method

Is there a way to associate the function in authorized with all routes in one single place, instead of modifying each individual route?

代码可以re-factored使用服务：

$routeProvider.when('/problem', {
    templateUrl: '/app/management/problem/problem.tmpl.html',
    controller: 'problemCtrl',
    resolve: { auth: (AuthService,$route) => AuthService.check($route) }
})

使用 $route.current.params 访问建议的新路线的参数。

防止 URL 根据 HTTP 请求在 AngularJS 中进行未经授权的更改

Preventing Unauthorized URL Changes in AngularJS Based on HTTP Request

angularjs

ngroute