个人中心
gpt4 book ai didi

javascript - 路由更改后服务中的 AngularJS 函数抛出 'not a function error'？

转载 作者：行者123 更新时间：2023-12-03 08:37:45 25 4
gpt4 key购买 nike

我在使用 AngularJS 时遇到问题，其中我的一项服务 (authService.isLoggedIn()) 中的一个函数在我的控制台中抛出“不是函数”异常。但它仅在发生路线更改后(例如登录后)发生，因此在发生路线更改之前，从我的 $routeChangeStart 事件处理程序中成功调用该函数，但在发生路线更改后，我在我的 $routeChangeStart 事件处理程序中收到此异常控制台:

TypeError: authService.isLoggedIn is not a function
    at app.config.js:13

如果我需要发布我的服务器端代码(用于 API 路由的 NodeJS + Express)，请告诉我。

这是我的index.html

<!DOCTYPE html>

<html ng-app="myApp">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
    <base href="/">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>

</head>
<body>

    <div ng-controller="navCtrl">

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">TriviaAttack!</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a ng-click="showLogin()">Login</a></li>
                        <li><a ng-click="showRegister()">Register</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div ng-view></div>

    </div>

    <script src="./js/ui-bootstrap-custom-tpls-0.14.0.min.js"></script>

    <script src="./app/app.js"></script>
    <script src="./app/app.routes.js"></script>
    <script src="./app/app.config.js"></script>
    <script src="./app/services/authInterceptor.js"></script>
    <script src="./app/services/auth.js"></script>
    <script src="./app/services/authToken.js"></script>
    <script src="./app/services/user.js"></script>
    <script src="./app/controllers/nav.js"></script>
    <script src="./app/controllers/home.js"></script>
    <script src="./app/controllers/login.js"></script>
    <script src="./app/controllers/landingpage.js"></script>

</body>
</html>

app.js

var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);
console.log('myApp loaded');

app.routes.js

angular.module('myApp')
.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: './app/views/landingpage.html',
        controller: 'landingpageCtrl'
    })
    .when('/home', {
        templateUrl: './app/views/home.html',
        controller: 'homeCtrl'
    });
});
console.log('app.route loaded');

app.config.js

angular.module('myApp')
.config(function($locationProvider, $httpProvider) {

    //Removes # from urls.
    $locationProvider.html5Mode(true);

    //Add authentication interceptor to $httpProvider.interceptors array.
    $httpProvider.interceptors.push('authInterceptor');
})
.run(function($rootScope, authService, $location) {
    $rootScope.$on('$routeChangeStart', function(event) {

        authService.isLoggedIn()
        .then(function(response) {
            console.log(response);
            if (response.status == 200) {
                $rootScope.user = response.data;
            } else {
                console.log('User not authenticated/logged in.');
            }
        });

    });
});

服务/authInterceptor.js

angular.module('myApp').
service('authInterceptor', function($location, authToken) {
    var service = this;

    service.request = function(config) {
        config.headers.authorization = authToken.getToken();
        return config;
    }


    service.responseError = function(response) {
        $location.path('/');
        return response;
    }

});

服务/auth.js

angular.module('myApp')
.service('authService', function($http) {
    var service = this;

    service.login = function(user, pass) {
        return $http.post('/api/login', {username: user, password: pass});
    }

    service.isLoggedIn = function() {
        return $http.get('/api/user');
    }

});

Controller /login.js

angular.module('myApp')
.controller('loginCtrl', function($scope, $modalInstance, $location, authService, authToken) {
    $scope.msg = '';
    $scope.loginData = {
        username: '',
        password: ''
    }
    $scope.login = function() {
        authService.login($scope.loginData.username, $scope.loginData.password)
        .then(function(response) {
            if (response.data.success) {
                authToken.setToken(response.data.token);
                authService.isLoggedIn = true;
                $modalInstance.close();
                $location.path('/home');
            } else {
                $scope.msg = response.data.message;
                console.log('error logging in');
            }
        });
        $scope.loginData = {};
    };

});

最佳答案

在你的controllers/login.js中

您正在设置

authServer.isLoggedIn to true

这使它成为“ bool 值”，对吗？

关于javascript - 路由更改后服务中的 AngularJS 函数抛出 'not a function error'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33144841/

25 4 0
文章推荐： javascript - 使用 Angular 中的 select 传递多个参数
文章推荐： javascript - TDD原理，如何让测试失败
文章推荐： javascript - Gulp/Babelify es6
文章推荐： javascript - jquery 数据表中第 0 行请求未知参数 1
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com