Question

如果转换挂钩等待来自我的API的checkAuth()请求失败，然后将用户重定向到登录页面而转换挂钩没有成功解析，该怎么办？

这是我的过渡钩码：

app.js

angular.module('app')
  .run(function ($state, $transitions, AuthService) {
    $transitions.onBefore({ to: 'auth.**' }, function() {
      AuthService.isAuthenticated().then(function (isAuthenticated) {
        if (!isAuthenticated) {
          $state.go('login');
        }
      });
    });
  });

当未经身份验证的用户尝试访问身份验证限制视图时，我使用$state服务将用户重定向到登录页面。但是通过此实现，转换onBefore()已经解决，因此在我的checkAuth()方法完成之前，转换成功。因此，在转换到登录视图之前，它仍然会显示（拆分）秒的视图。

以下是上述代码中使用的auth服务方法的实现：

auth.service.js

authService.isAuthenticated = function () {
  // Checks if there is an authenticated user in the app state.
  var authUser = AuthUserStore.get();
  if (authUser) {
    return Promise.resolve(true);
  }
  // Do check auth API request when there's no auth user in the app state.
  return authService.checkAuth()
    .then(function () {
        return !!AuthUserStore.get();
      });
};

authService.checkAuth = function () {
  return $http.get(API.URL + 'check-auth')
    .then(function (res) {
        // Store the user session data from the API.
        AuthUserStore.set(res.data);
        return res;
      });
};

Answer 1

根据我对onBefore钩子的理解，

返回值可用于暂停，取消或重定向当前过渡。

https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html#onbefore

也许您需要了解HookResult并使用它来满足您的需求。

https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

希望这有帮助

干杯！

Answer 2

感谢Jonathan Dsouza从UI路由器提供HookResult文档。

通过处理isAuthenticated()服务方法中的Promise并返回必要的HookResult值以根据需要处理转换来解决此问题：

app.js

angular.module('app')
  .run(function ($transitions, AuthService) {
    $transitions.onBefore({to: 'auth.**'}, function (trans) {
      return AuthService.isAuthenticated().then(function (isAuthenticated) {
          if (!isAuthenticated) {
            return trans.router.stateService.target('login');
          }
          return true;
        });
    });
 });

AngularJS：如何使用UI-Router的Transition Hook从API检查auth？

2 个答案: