错误:Angular Ui 路由器状态更改时超出了最大调用堆栈大小

Error: Maximum call stack size exceeded on Angular Ui Router State Change(错误:Angular Ui 路由器状态更改时超出了最大调用堆栈大小)
本文介绍了错误:Angular Ui 路由器状态更改时超出了最大调用堆栈大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

基本上我要做的是根据用户身份验证状态更改状态.

Basically what I'm trying to do is change the state depending on user authentication status.

当我在没有 $rootScope 的情况下执行 $state.go(); 时,我可以在没有错误的情况下重定向到页面,但是当我使用

When I do $state.go(); without $rootScope, I can redirect to the page without the error but when I do with

$rootScope.$on('$stateChangeStart', function (event) {$state.go();event.preventDefault()})

以下是控制器代码:

DiaryDashboard.controller('AppController', 
  ['$scope', '$rootScope', '$localStorage', '$http', '$state'
  , function ($scope, $rootScope, $localStorage, $http, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {

    if ($localStorage.userdetails &&
        $localStorage.userdetails.isAuthenticated == true) {

        //Check for Authentication state
        //If not redirect to the state in the else clause
        //Populate the $rootScope with user details
        $rootScope.userdetails = $localStorage.userdetails;

        //Switch to the parent state
        $state.go();
        event.preventDefault();

    } else {

        //If User not authenticated
        //GO to the Authentication State
        $state.go('auth');
        event.preventDefault();

    }
  })

}]);

推荐答案

这里最重要的是要明白这一点:

The most important thing here is to understand this:

如果不需要,请不要重定向.换句话说,如果用户已经被重定向到预期状态 - 我们应该离开......有 一个工作plunker 具有类似的解决方案.

Do not redirect if not needed. Other words, if user is already redirected to intended state - we should leave... There is a working plunker with similar solution.

查看此问答答:

调整后的代码:

$rootScope.$on('$stateChangeStart', function (event, toState) {

    var isNavigatingToAuth = toState.name === "Auth";

    if(isNavigatingToAuth){

       return; // no need to redirect 
    }

    if ($localStorage.userdetails &&
        $localStorage.userdetails.isAuthenticated == true)
    ...

这篇关于错误:Angular Ui 路由器状态更改时超出了最大调用堆栈大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Swipable Vuetify Tabs with router(带路由器的可滑动Vutify标签)
Vue router - how to have multiple components loaded on the same route path based on user role?(VUE路由器-如何根据用户角色将多个组件加载到同一路由路径上?)
Router Link in VUE JS is not showing active(VUE JS中的路由器链路未显示为活动状态)
Can i import single file component using Vue and Vue Router CDN?(我可以使用VUE和VUE路由器CDN导入单个文件组件吗?)
Vue 3 - Get access to router-view instance in order to call child methods(VUE 3-访问路由器视图实例以调用子方法)
How to replace one parameter in Vuejs router(如何替换Vuejs路由器中的一个参数)