angularjs http拦截器在加载的位置路径上显示错误答案

【问题标题】：angularjs http interceptor to show error on loaded location pathangularjs http拦截器在加载的位置路径上显示错误
【发布时间】：2016-06-16 05:49:35
【问题描述】：

我有一个应用程序，我为其创建了一个拦截器来处理 15 分钟不活动后的令牌过期，它在令牌过期后成功重定向到登录页面，但在重定向到登录页面后我无法显示错误。

我的问题是，在拦截器将应用程序重定向到该页面后，如何在登录页面上向用户显示令牌过期错误。

这是我的重定向器：

    app
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.interceptors.push(function($q, $location, LoopBackAuth) {
            return {
                responseError: function(rejection) {
                    if (rejection.status == 401) {
                        //Now clearing the loopback values from client browser for safe logout...
                        LoopBackAuth.clearUser();
                        LoopBackAuth.clearStorage();
                        $location.path("/login");
                    }
                    return $q.reject(rejection);
                }
            };
        })
    }])
    .config(function(LoopBackResourceProvider) {    
        LoopBackResourceProvider.setAuthHeader('X-Access-Token');
    })

【问题讨论】：

/login 路径是主应用程序的一部分吗？它是否共享相同的 index.html？如果是这样，您可以使用$stateParams.error = 'Token expired' 转换到另一个页面，然后将其显示在登录表单上方，在弹出窗口中，等等。您也可以将错误设置为 url 参数：/login?error=TokenExpired.
@forrestmid 我的另一个问题是我缺乏对 angularjs 的了解...我尝试将错误作为 url 参数发送，并且我在登录控制器中设置了范围，但我无法在执行 location.path('login').search(params) 时的模板，但仅在重新加载 login?error=xxxx 页面时，好像 location.path 没有为该页面创建 get 请求。
也不知道如何转换和添加 $stateParams，尝试过但一直遇到未定义的无法调用方法转换...因为范围不是拦截器中的 var...再次我缺乏这里的 angularjs 知识可能是唯一的原因
@forrestmid 谢谢你，终于设法通过 url params 做你建议的事情:) 我会在这里添加我的答案。
如果您需要，我可以为您添加一个涉及 $state 转换的答案。可能更干净。

标签： angularjs angular-http-interceptors

【解决方案1】：

最后，感谢@forrestmid 为我指明了正确的方向，这就是我最终要做的事情。

关于刚刚添加的http拦截器：

$location.path("/login").search({error: 'invalid_token'});

然后在控制器上只需要做：

var queryString = $location.search();
$scope.errors = {};
if (queryString && queryString.error) {
    $scope.errors = {
        'invalid_token': {
            code: 'invalid_token'
        }
    }
}

现在在模板上我已经有了处理错误对象的逻辑，所以现在它可以正常工作了:)

【讨论】：

【解决方案2】：

关于将 $state 服务注入 HTTP 拦截器的参考 this post：

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push(function($q, $injector, LoopBackAuth) {
        return {
            responseError: function(rejection) {
                if (rejection.status == 401) {
                    //Now clearing the loopback values from client browser for safe logout...
                    LoopBackAuth.clearUser();
                    LoopBackAuth.clearStorage();
                    $injector.get('$state').go('app.login', {error: 'Token expired.'});
                }
                return $q.reject(rejection);
            }
        };
    })
}]);

假设您使用的是 ui.router：

app.config(function($stateProvider){
    $stateProvider
       .state("app",{abstract: true})
       .state("app.login", {
           url: "/login",
           params: {error: ""}
       });
});

默认情况下，转换到app.login状态时不会出错，但是当有参数错误设置为任何值时，它可以显示错误。这将位于您登录页面上的$stateParams.error 变量中。

如果我没有测试任何代码，请告诉我。我认为您想要的行是 $injector 行。

【讨论】：