角度重定向不起作用答案

【问题标题】：Angular redirection not working角度重定向不起作用
【发布时间】：2015-09-02 09:46:15
【问题描述】：

我确信这已经被回答了一千次，但我无法弄清楚为什么我只能在搜索数小时后使用 window.location.href 进行重定向。怎么回事？

angular.module(..., [])
.config([..., function(...) {
        /* Route Provider and ngRoute reference removed as per comment below */
         $stateProvider
            .state('login', {
                url : '/login',
                controller: 'loginCtrl',
                templateUrl: '/login'
            })

            .state('home', {
                url: '/',
                templateUrl: '/views/index',
                controller: 'HomeCtrl'

            });
        $locationProvider.html5Mode(true);
    }
])
   .run(['$state',  '$rootScope', function ($state, $rootScope) {
    $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
            if ($rootScope.username == null || $rootScope.password == null) {
                if (toState.templateUrl == "/login") {

                } else {
                        event.preventDefault();
                        $state.go("login");

                }
            }
        });
    }
]);

更新：StateChangeStart 被调用了两次，第二次是登录状态。控制台中没有抛出任何错误。我对角度很陌生，所以如果我做错了什么，我愿意接受任何建议。如果您需要任何其他代码（例如：控制器、服务），请告诉我，我会发布。

但是，在显示欢迎页面时，即使用户名和密码为空，它也会停留在欢迎页面上。在浏览器中输入/login 可以正常工作。

根据Angular $location.path not working：

                /* snip */ else {
                    $rootScope.$apply(function () {
                        $location.path('login');
                    });
                } /* snip */

给我一个错误：$digest already in progress。

更多详情： 我刚刚发现如果我删除 $locationProvider.html5Mode(true); 行，加载页面时未调用 stateChangeStart。服务器是 ASP.Net。

编辑 2 看起来 angular 确实是在获取登录页面，但是不知道放在哪里？

【问题讨论】：

我很确定你正在混淆 Angular 的原生 ngRoute 和 UI-Router 模块。
放置 event.preventDefault();在您重定向之后并使用 $state.go('login') 并删除 $location.path('login');
@XGreen 所以你的意思是$rootScope.$apply(function(){$state.go("login");event.preventDefault();});？似乎也没有任何效果 - 保持在主页上，没有错误。

标签： javascript angularjs

【解决方案1】：

在角度使用的run函数内：

$rootScope.$on('$stateChangeStart', function (event, toState) {
    if (toState.name != 'login') {
        $state.go('login');
        event.preventDefault();
    }
});

仅使用 stateProvider 设置路由。

按照此处的指导using AngularJS html5mode with nodeJS and Express

或在 apache 上：

https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

为了在节点上为 Angular js 正确设置 html5 pushstate（如果那是你在服务器上使用的）

【讨论】：

没有生效。看看这个屏幕截图：i.giphy.com/3oEdv7sewygkOhGidi.gif
尝试仅使用状态提供程序。我不认为它的设计是为了与 side routeprovider 一起工作。
我刚刚尝试过，现在让我更新代码。

【解决方案2】：

Click here 并阅读我针对身份验证问题所写的内容，您会发现或多或少有用。

【讨论】：

我可以向您建议的第一件事是如果您没有 .htaccess（如果您在 linux 中）则删除 $locationProvider.html5Mode(true) 这可能会出现问题。
说得很好，david 你有支持html5模式的服务器端实现吗？
您需要为 html5 pushState 设置重定向才能工作属性。它不仅仅是客户端的事情。 stackoverflow.com/questions/17777967/…
阅读本文以在 Linux 上使用 .htaccess 文件设置更好的环境ngmilk.rocks/2015/03/09/…
@MatteoGabriele 如果我删除 locationProvider 行，则永远不会调用 stateChangeStart。