AngularJS 1.8.3点击showSubmissions跳转登录页而非提交页问题

问题现象 #

• 使用AngularJS 1.8.3开发，点击菜单中的$ctrl.showSubmissions()后，页面显示登录页而非提交页
• 控制台输出----->IS authenticated，认证状态正常，但未出现路由相关日志
• 直接访问http://localhost:8080/#!/submissions可正常加载提交页，且能看到路由日志

相关代码 #

菜单代码 #

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#" ng-click="$ctrl.showSubmissions()">
                <i class="fas fa-sign-out-alt"></i> Submissions
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" ng-click="$ctrl.logout()">
                <i class="fas fa-sign-out-alt"></i> Feeds
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" ng-click="$ctrl.showFeeds()">
                <i class="fas fa-sign-out-alt"></i> Logout
            </a>
        </li>
    </ul>
</div>

showSubmissions函数代码 #

ctrl.showSubmissions = function() {
    AuthService.isAuthenticated()
        .then(function(isAuthenticated) {
            if (isAuthenticated) {
                console.log('----->IS authenticated');
                $location.path('/submissions');
            } else {
                console.log('----->Not authenticated');
                $location.path('/login');
            }
        })
        .catch(function(error) {
            console.error('Auth check error:', error);
            ctrl.error = 'Authentication error. Please log in again.';
            $location.path('/login');
        });
};

路由配置代码 #

angular.module('supabaseApp')
.config(['$routeProvider', function($routeProvider) {

    console.log('----$routeProvider->',);

    $routeProvider
        .when('/login', {
            template: '<login-component></login-component>'
        })
        .when('/dashboard', {
            template: '<dashboard-component></dashboard-component>',
            resolve: {
                auth: ['$q', '$location', 'AuthService', function($q, $location, AuthService) {
                    const deferred = $q.defer();

                    AuthService.isAuthenticated()
                        .then(function(isAuthenticated) {
                            if (isAuthenticated) {
                                deferred.resolve();
                            } else {
                                deferred.reject('Not authenticated');
                                $location.path('/login');
                            }
                        })
                        .catch(function(error) {
                            console.error('Auth check error:', error);
                            deferred.reject('Auth check failed');
                            $location.path('/login');
                        });

                    return deferred.promise;
                }]
            }
        })
        .when('/submissions', {
            template: '<submissions-component></submissions-component>',
            resolve: {
                auth: ['$q', '$location', 'AuthService', function($q, $location, AuthService) {
                    const deferred = $q.defer();

                    AuthService.isAuthenticated()
                        .then(function(isAuthenticated) {
                            if (isAuthenticated) {
                                console.log('-----&gt;Router isAuthenticated');
                                deferred.resolve();
                            } else {
                                console.log('-----&gt;Router Not authenticated');
                                deferred.reject('Not authenticated');
                                $location.path('/login');
                            }
                        })
                        .catch(function(error) {
                            console.error('Auth check error:', error);
                            deferred.reject('Auth check failed');
                            $location.path('/login');
                        });

                    return deferred.promise;
                }]
            }
        })
        .otherwise({
            redirectTo: '/login'
        });
}]);

问题根源 #

菜单中的<a>标签设置了href="#"，点击时会触发浏览器默认的锚点跳转行为，将URL重置为/#，这会覆盖AngularJS的$location.path()跳转，最终触发路由配置中的.otherwise({redirectTo: '/login'})规则，导致页面跳转到登录页。

修复方案 #

有两种可行的解决方式：

方式1：修改<a>标签的href属性 #

将href="#"改为href="javascript:void(0)"，阻止默认的锚点跳转：

<a class="nav-link" href="javascript:void(0)" ng-click="$ctrl.showSubmissions()">
    <i class="fas fa-sign-out-alt"></i> Submissions
</a>

方式2：在ng-click中阻止默认事件 #

在调用$ctrl.showSubmissions()时传入$event并调用preventDefault()：

<a class="nav-link" href="#" ng-click="$ctrl.showSubmissions($event)">
    <i class="fas fa-sign-out-alt"></i> Submissions
</a>

同时修改函数：

ctrl.showSubmissions = function($event) {
    $event.preventDefault(); // 阻止默认跳转行为
    AuthService.isAuthenticated()
        .then(function(isAuthenticated) {
            if (isAuthenticated) {
                console.log('----->IS authenticated');
                $location.path('/submissions');
            } else {
                console.log('----->Not authenticated');
                $location.path('/login');
            }
        })
        .catch(function(error) {
            console.error('Auth check error:', error);
            ctrl.error = 'Authentication error. Please log in again.';
            $location.path('/login');
        });
};

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