取消路由并重定向到其他路由而不在AngularJS中显示原始内容答案

【问题标题】：Cancel route and redirect to other route without displaying the original content in AngularJS取消路由并重定向到其他路由而不在AngularJS中显示原始内容
【发布时间】：2013-08-17 20:15:48
【问题描述】：

我想检查一个 http 服务以查看用户是否经过身份验证，以及它是否有权查看 AngularJS 1.2.0rc1 中的特定页面（控制器）。

我有这种情况：用户 A 想访问http://www.example.com/content。现在，当他或她未经过身份验证时，不应访问此内容。如果用户未通过身份验证，则应将其重定向到http://www.example.com/login。

现在我设法做到了，但我简要地看到了内容页面的呈现 html。我不想要这个。如何在不渲染内容页面的情况下重定向到登录页面？

我这样注册我的路线：

$routeProvider.when('/login', route.resolve('Login', false))
$routeProvider.when('/content', route.resolve('Content', true))

现在我已经尝试过了：

$rootScope.$on('$routeChangeStart', function (event, route) {
    if (route.requiresLogin) {
        $http.get('/api/user/loggedin/').then(function (response) {
            if (response !== 'true') {
                $location.path('/login');
            }
        });
    }
});

哪个有效，但我仍然看到其他页面（内容）的html内容在闪烁。

我读过here，您也可以尝试在解析路由时更改解析功能：

    var resolve = function (baseName, requiresLogin) {
    var routeDef = {};
    var dependencies = [routeConfig.getControllersDirectory() + baseName + 'Controller.js'];

    routeDef.templateUrl = routeConfig.getViewsDirectory() + baseName.toLowerCase() + '.html';
    routeDef.controller = baseName + 'Controller';
    routeDef.requiresLogin = requiresLogin;
    routeDef.resolve = {
        load: ['$q', '$rootScope', '$http', '$location', function ($q, $rootScope, $http, $location) {
            console.log(requiresLogin);
            if (requiresLogin) {
                return checkLoggedIn($q, $rootScope, $http, $location);
            } else {
                return resolveDependencies($q, $rootScope, dependencies);
            }
        }]
    };

    return routeDef;
}

但是这里页面也只是短暂显示。

希望你能帮帮我。

【问题讨论】：

标签： angularjs angularjs-routing

【解决方案1】：

第一个答案应该有效，但要使用$q，我会使用defer.resolve() 或defer.reject("rejection_reason")，然后我会在绑定到外部元素的顶级控制器中监听$routeChangeError routeProvider 管理的 ng-view。

所以在您的 HTML 中，类似于：

<body ng-app="app" ng-controller="DocumentCtrl">
  <div ng-view>
  </div>
</body>

那么你的路线将被定义为：

when('/home', {
  templateUrl: templateUrl blah,
  controller: baseName + 'Controller',
  resolve: {
    load: function($q, MY_USER_SERVICE){
      var defer = $q.defer();
      if(~MY USER LOGGED_IN LOGIC RETURNS TRUE~){
        defer.resolve();
      } else {
        defer.reject("not_logged_in");
      }
      return defer.promise;

    }
  }
}).

然后我的 DocumentCtrl 控制器将包含：

$scope.$on("$routeChangeError", function(evt,current,previous,rejection){
  if(rejection == "not_logged_in"){
    //DO SOMETHING
  } else {
    //OR DO SOMETHING ELSE
  }
});

我正在运行上述程序，并且没有任何不应该加载的视图的闪烁。

【讨论】：

确认为处理此问题的方式，但不显示原始路由页面。 Promise 不是必需的，一个简单的 throw new Error ('') 就足够了。关键是只有出错才会停止当前的导航。也许 Angular 的未来版本会给我们带来一种处理条件（注入）重定向的好方法。
哦，有趣。我们可以简单地在 load 函数中返回 true，或者如果我们不想允许访问，则有条件地抛出一个错误？在我看到的每个示例中，都使用了 Promise。
使用 UI-router 让这一切变得简单。只需在 resolve 中写入 $state.go('state') 即可在加载控制器之前重定向您。