Angular UI Router 1.0.0 - 使用 $transitions.onBefore 防止路由加载

2024-01-04

我升级到 UI Router 1.0.0,它已从.$on($stateChangeX to $transitions.onX( (在这里查看$transitions https://ui-router.github.io/docs/latest/classes/transition.transition-1.html).

我需要在导航到页面之前解析用户的个人资料及其访问权限(例如,用户永远不应该看到他们尝试转换到的页面)。之前,我能够使用resolve直接在state并按顺序传递我需要的东西,如下所示:

state('my-state', {
        ...
        resolve : {
            ProfileLoaded : ['$rootScope', function ($rootScope) {
                return $rootScope.loadProfile();
            }],
            access: ['Access', 'ProfileLoaded', function (Access, ProfileLoaded) {
                return Access.hasORRoles(['admin']); //either $q.reject(status code); or "200"
            }]
        }
    })

然后我可以轻松检索错误类型$stateChangeError:

app.run(...
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {

       if (error === 401) {
           $state.go('home');
       }
       ...

With $transitions,我正在尝试做同样的事情......

.state('user.my-page', {
  ...
  data: {
    loadProfile: true,
    roles: [
      'admin'
    ]
  }
});


app.run(...

  $transitions.onBefore({to: profile}, function(trans) {
    return loadProfile().then(function (prof) {
      var substate = trans.to();
      return Access.hasORRoles(substate.data.roles); //either $q.reject(status code); or "200"
    });
  });

  $transitions.onError({}, function(trans) {
    var error = trans && trans._error;

    if (error == 401) {
      $state.go('home');
    }
    ...

所以我的问题是:

Does onBefore做同样的事情resolve确保用户在检查数据之前无法导航?页面仍在加载,然后重定向$state.go页面加载后。


只为那些仍然登陆这里的人。

您可以返回一个承诺以阻止网站加载。

$transitions.onBefore({}, function(transition) {
      return new Promise((resolve) => { 
      // Do auth.. 
      return Access.hasORRoles(['admin']);
   });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular UI Router 1.0.0 - 使用 $transitions.onBefore 防止路由加载 的相关文章

随机推荐