草庐IT

javascript - AngularJS : angular-ui-router always redirects to $urlRouterProvider. 否则位置

coder 2024-07-23 原文

我正在尝试创建一个 SPA,您必须在其中登录才能访问几乎所有内容。所以很自然地,您看到的默认屏幕是登录屏幕。但是,在用户登录后,无论 ui-sref 是什么,ui-router 都会重定向到登录页面(即使用户已通过身份验证)。这是我的用户界面路由器代码:

(function () {
'use strict';
angular
    .module('app', ['ui.router', 'satellizer'])
    .config(function ($stateProvider, $urlRouterProvider, $authProvider, $httpProvider, $provide) {
  
        $httpProvider.interceptors.push(['$q', '$injector', function($q, $injector){
            return {
                responseError: function (rejection) {
                    var $state = $injector.get('$state');
                    var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid'];
                    angular.forEach(rejectionReasons, function (value, key) {
                        if (rejection.data.error === value) {
                            localStorage.removeItem('user');
                            $state.go('auth');
                        }
                    });

                    return $q.reject(rejection);
                },
                response: function(response) {
                    var authorization = response.headers('authorization');
                    if(authorization !== null) {
                        authorization = authorization.substr(7).trim();
                        //console.log(authorization);
                        var $auth = $injector.get('$auth');
                        $auth.setToken(authorization);
                    }
                    return response;
                }
            }
        }]);

        $authProvider.loginUrl = 'mingdaograder/api/authenticate';

        $stateProvider
            .state('users', {
                url: '/users',
                templateUrl: 'views/userView.html',
                controller: 'UserController as user'
            })
            .state('subjects', {
                url: '/users/:user_id/subjects',
                templateUrl: 'views/subjectsView.html',
                controller: 'SubjectsCtrl as subjectsCtrl'
            })
            .state('subject', {
                url: '/users/:user_id/subjects/:subject_id',
                templateUrl: 'views/subjectView.html',
                controller: 'SubjectCtrl as subjectCtrl'
            })
            .state('auth', {
                url: '/auth',
                templateUrl: 'views/authView.html',
                controller: 'AuthController as auth'
            });
            //.state('otherwise', {
            //    url: '*path',
            //    templateUrl: 'views/authView.html',
            //    controller: 'AuthController as auth'
            //});

            //$urlRouterProvider.otherwise('/auth');
            $urlRouterProvider.otherwise(function($injector, $location) {
                console.log("Could not find " + $location);
                $location.path('/auth');
            });
    })
    .run(function ($rootScope, $state, $log) {
        $rootScope.$on('$stateChangeStart', function (event, toState) {
                console.log(toState.name);
            var user = JSON.parse(localStorage.getItem('user'));
            if (user) {
                $rootScope.authenticated = true;
                $rootScope.currentUser = user;
            }
        }
        );
    }
);
})();

任何时候我尝试使用 $state.go(这里的任何州名称) 或什至在地址栏中键入地址,我总是被重定向到 auth 状态。在控制台上,每条路由的消息都是“找不到 http://localhost/#/”。我可以输入 http://localhost/#/users/5/subjects我收到了同样的消息。

这是我的一个 Controller 在做重定向:

(function () {
    'use strict';

    angular
        .module('app')
        .controller('AuthController', AuthController);

    function AuthController($auth, $state, $http, $rootScope, $log) {
        var vm = this;

        vm.loginError = false;
        vm.loginErrorText;

        vm.login = function () {
            var credentials = {
                username: vm.username,
                password: vm.password
            };

            $auth.login(credentials).then(function () {
                return $http.get('api/authenticate/user');
            }, function (error) {
                vm.loginError = true;
                vm.loginErrorText = error.data.error;
            }).then(function (response) {
                var user = JSON.stringify(response.data.user);
                localStorage.setItem('user', user);
                $rootScope.authenticated = true;
                $rootScope.currentUser = response.data.user;

                //$log.info('From AuthCtrl: ' + $rootScope.currentUser.id);
                $state.go('subjects', {user_id:$rootScope.currentUser.id});
            });
        }
    }
})();

知道我做错了什么吗?非常感谢您的宝贵时间。

更新:好的,我还没有找到修复它的方法,但我想我可能已经找到了可能的原因。它似乎只发生在带参数的路由上。例如,如果我转到路径为/users 的 users 状态,则没有重定向。但是,如果我进入路径为/users/:user_id/subjects 的 subjects 状态,它会重定向。就像Url匹配服务无法识别/users/5/subjects匹配/users/:user_id/subjects,所以重定向。有什么想法可以解决这个问题吗?

最佳答案

我发现我的初始状态 url 开头没有“/”。每次我导航到状态时,丢失的“/”似乎将其插入 stateProvider。否则。

state1: 'opportunity'
state1Url : '/opportunity/' <== added initial forward slash to make it work.

state2: 'opportunity.create'
state2Url : 'create/'

关于javascript - AngularJS : angular-ui-router always redirects to $urlRouterProvider. 否则位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31896150/

有关javascript - AngularJS : angular-ui-router always redirects to $urlRouterProvider. 否则位置的更多相关文章

随机推荐