AngularJS：如何让UI-Router的Transition Hooks等待API鉴权完成再跳转？

你的问题核心在于**onBefore钩子没有返回Promise，导致UI-Router在API请求完成前就完成了过渡解析**，所以会短暂显示受限页面。要解决这个问题，我们需要让钩子返回一个Promise，让UI-Router等待鉴权请求完成后再决定是否继续过渡。

修改后的Transition Hook代码 #

angular.module('app')
.run(function ($transitions, AuthService) {
  $transitions.onBefore({ to: 'auth.**' }, function(trans) {
    // 返回鉴权Promise，让UI-Router暂停过渡直到请求完成
    return AuthService.isAuthenticated().then(function (isAuthenticated) {
      if (!isAuthenticated) {
        // 取消当前过渡，触发登录页的新过渡
        return trans.router.stateService.target('login');
      }
      // 已认证则返回true，允许当前过渡继续
      return true;
    });
  });
});

关键改动说明 #

• 让钩子返回Promise：原本的代码里onBefore没有返回值，UI-Router会直接解析钩子并开始渲染目标视图。现在返回AuthService.isAuthenticated()的Promise，UI-Router会暂停过渡流程，直到Promise完成。
• 用trans.target替代$state.go：在Transition Hook中直接调用$state.go可能引发过渡冲突，返回trans.router.stateService.target()的结果是UI-Router官方推荐的方式，它会明确告知框架取消当前过渡并启动登录页的跳转。
• 明确过渡控制逻辑：
  • 已认证时返回true，允许进入目标权限页面；
  • 未认证时返回登录页的目标状态，触发重定向。

原有代码的问题根源 #

你的原始代码中，onBefore钩子没有等待AuthService.isAuthenticated()的异步请求完成就直接解析了，UI-Router会立即开始渲染auth.**对应的视图。等API请求完成后才执行$state.go('login')，这就导致了用户短暂看到受限页面再跳转的现象。

鉴权服务的适配性 #

你的auth.service.js逻辑已经完全适配修改后的钩子：

• 本地存在认证用户时，立即返回Promise.resolve(true)，不会触发API请求；
• 本地无用户时，发起checkAuth API请求，完成后再返回最终的认证状态。

无论哪种场景，UI-Router都会完整等待鉴权流程结束后再处理过渡，彻底解决"短暂显示目标视图"的问题。

内容的提问来源于stack exchange，提问作者N Petterson