8

我正在用 Angular 编写一个单页应用程序，特别是angular.dart，但我假设这个问题仍然适用于 AngularJS。

以以下路线为例：

/login - 期望没有人登录。如果有人通过身份验证但未注册，则重定向到“注册”路由，如果他们已注册，则重定向到“家”路由。

/register - 需要一个尚未完成注册过程的经过身份验证的用户。如果未通过身份验证，则重定向到登录。如果通过身份验证，则重定向到主页。

/home - 需要经过身份验证和注册的用户。如果未通过身份验证，则重定向到“登录”路由，如果未注册，则重定向到“注册”路由。

我已经做了很多搜索，但找不到内置或惯用的方法来检查以确保在加载与特定路由关联的控制器之前满足某些先决条件，并在不满足这些先决条件时适当地重定向。

任何帮助将不胜感激！

4

4 回答 4

4

Angular.Dart 和 Angular.JS 路由框架非常/根本不同。Angular.Dart 使用第三方路由框架（https://github.com/dart-lang/route/tree/experimental_hierarchical）并且仅实现 Angular 特定功能，例如ng-view通过ViewFactory.

所以你的问题真的属于route_hierarchical包域。目前，您可以否决用户尝试离开路线，但我猜您希望根据用户是否登录来否决用户输入路线的能力。不幸的是，这尚不支持，但已在计划中。

您可以同时尝试创建一个自定义 viewFactory 包装器。

class RecipesRouteInitializer implements RouteInitializer {
   void init(Router router, ViewFactory view) {
     router
       ..addRoute(
          name: 'login',
          path: '/login',
          enter: authView(router, view('login.html'), NOT_AUTH))
       ..addRoute(
          name: 'register',
          path: '/register',
          enter: authView(router, view('register.html'), AUTH_NO_REG))
       ..addRoute(
          name: 'home',
          path: '/home',
          enter: authView(router, view('home.html'), AUTH_AND_REG));
   }

   authView(Router router, ngView, mode) {
     return (RouteEvent e) {
       if (mode == AUTH_AND_REG) {
         if (!authService.isAuth) {
           router.go('login', {});
           return;
         }
         if (!authService.isReg) {
           router.go('register', {});
           return;
         }
       } else if (mode == AUTH_NO_REG) {
         if (!authService.isAuth) {
           router.go('login', {});
           return;
         }
         if (authService.isReg) {
           router.go('home', {});
           return;
         }
       } else if (mode == NOT_AUTH) {
         if (authService.isAuth) {
           router.go('register', {});
           return;
         }
       }
       ngView(e);
     };
   }

}

免责声明：这只是一个想法……可能完全行不通。

于 2013-12-06T21:34:31.950 回答
3

好吧，我在 Dart 中做了一个东西，它接近于以前的一个并没有真正起作用的解决方案。主要的一点是，在 中RouteEventHandler，你需要调用RouteEventHandler视图的。

      ..addRoute(
          name: 'userAdd',
          path: '/userAdd',
          enter: checkAuthentication(router,view,'view/addUser.html'))
      ..addRoute(
        name: 'login',
        path: '/login',
        enter: view('view/login.html'));
  }

  RouteEventHandler checkAuthentication(Router router,ViewFactory view, String location){
     return (RouteEvent e) {
      if(_authenticationService.isAuthenticated()){
        view(location)(e);
      }else{
        router.go("login",{});
      }
    };
  }
于 2014-02-12T08:47:08.830 回答
1

注意：这仅适用于 AngularJS，如果有人使用 JS 需要它，请保留它。

看看中的resolve房产$routeProvider。您可以返回一个承诺，该承诺将确定是否应接受路线更改。

从文档：

如果这些依赖项中的任何一个是承诺，路由器将等待它们全部解决或在控制器实例化之前被拒绝。如果所有的 Promise 都成功解决，则注入已解决的 Promise 的值并触发 $routeChangeSuccess 事件。如果任何一个 Promise 被拒绝， $routeChangeError 事件就会被触发。

这里还有一个关于它的视频和 egghead.io 上的路线生命周期

于 2013-12-06T21:01:12.870 回答
0

我知道以下解决方案不适用于 Angular.Dart，但仍然值得一提的是 ui-router 的解决方案：

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-create-rules-to-prevent-access-to-a-state

app.config(function($stateProvider) {
  $stateProvider.state('privatePage', {
  data: {
    rule: function(user) {
    // ...
  }
});
});
app.run(function($rootScope, $state, $currentUser) {
$rootScope.$on('$stateChangeStart', function(e, to) {
if (!angular.isFunction(to.data.rule)) return;
var result = to.data.rule($currentUser);

if (result && result.to) {
  e.preventDefault();
  // Optionally set option.notify to false if you don't want 
  // to retrigger another $stateChangeStart event
  $state.go(result.to, result.params, {notify: false});
}
});
});
于 2015-03-19T07:52:21.720 回答