从状态提供程序的解析方法更改角度应用程序的状态

Change state of angular app from resolve method of state provider

本文关键字：状态 应用程序 方法 程序      更新时间：2023-09-26

我在我的角度应用程序中使用了ui-router。目前我有两条路线/signin和/user。最初，当用户单击登录按钮时，它会显示/signin，我正在发送 ajax 请求并获取用户 ID。我将用户 ID 存储在本地存储中并将状态更改为/user。

现在，我想要的是，如果用户未登录，并且用户将地址栏更改为/user，它不会更改视图，而是会再次将地址栏 url 更改为/signin。

我尝试使用解析，但它不起作用。我的代码是：-

module.exports = function($stateProvider, $injector) {
$stateProvider
.state('signin', {
    url: '/signin',
    template: require('../templates/signin.html'),
    controller: 'LoginController'
})
.state('user', {
    url: '/user/:id',
    template: require('../templates/user.html'),
    resolve:{
        checkLogin:  function(){
             var $state = $injector.get('$state');
            console.log("in resolve");
             if (! window.localStorage.getItem('user-id')) {
                 console.log("in if")
                  $state.go('signin');
             }
        }
    },
    controller: 'UserController'
 })
}

请帮我解决这个问题。

我认为不允许在状态转换过程中更改状态。

因此，解决它的方法是将 checkLogin resolve 参数(我在下面将其更改为 userId (作为一个返回值或承诺的函数(在这种情况下，如果您无法获得 user-id，则为被拒绝的承诺(。

然后，您需要在$rootScope.$on('$stateChangeError')中处理此问题并检查错误代码。

resolve: {
   userId: function ($q, $window) {
      var userId = $window.localStorage.getItem('user-id');
      if (!userId) {
         return $q.reject("signin")
      }
      return userId;
   }
}

并在$stateChangeError处理程序中重定向：

$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
     if (error === "signin") {
        $state.go("signin");
     }
});

如果有人遇到此问题，您可以使用超时服务来解决它。它将状态切换调用放在队列的末尾。

此外，您应该使用承诺。拒绝它将阻止该状态的初始化：

resolve:{
    checkLogin: function(){
         var deferred = $q.defer();
         var $state = $injector.get('$state');
         if (!window.localStorage.getItem('user-id')) {
             $timeout(function(){$state.go('signin');});
             deferred.reject();
         } else {
             deferred.resolve();
         }
         return deferred.promise;
    }
},
相关文章：