Question

我正在尝试设置一个简单的基于令牌的身份验证，并且到目前为止能够创建令牌并将它们保存到本地存储，但是当我尝试创建一个包含令牌的拦截器时，我发送的每个请求都得到了一个奇怪的错误：

错误：[$ injector：unpr] http://errors.angularjs.org/1.6.6/ $ injector / unpr？p0 =％24localStorageProvider％20％3C-％20％24localStorage％20％3C-％20％24http％20％3C-％20 ％24templateRequest％20％3 C-％20％24route

这是我用于拦截器的代码

var app = angular.module('Jäsentietopalvelu', ["ngRoute"])

.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider){
        $locationProvider.hashPrefix('');
        $routeProvider
                .when('/', {
                templateUrl: 'login.html',
                })
                .when('/testi', {
                templateUrl: 'testi.html',
                })
                .when('/logout', {
                templateUrl: 'logout.html',
                })
                .when('/login', {
                templateUrl: 'login.html',
                })

        $httpProvider.interceptors.push(['$q','$location','$localStorage', function($q,$location, $localStorage){
                return {
                        'request': function (config){
                                config.headers = config.headers || {};
                                if ($localStorage.accessToken) {
                                        config.headers.Authorization = 'bearer ' + $localStorage.accessToken;
                                }
                                return config;
                        },
                        'responseError': function(response){
                                if(response.status === 401 || response.status === 403) {
                                        $location.path('/');
                                }
                                return $q.reject(response);
                        }
                };
        }]);
}])

我应该以什么方式创建拦截器以使其正常工作？它应该在module.config中还是在其他地方？

编辑：

这是我的索引页面

<html ng-app="Jäsentietopalvelu">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Jäsentietopalvelu</title>
        <script src="https://cdn.jsdelivr.net/ngstorage/0.3.10/ngStorage.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- load jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script><!-- load angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js"></script><!-- load angular routes -->
        <script src="core.js"></script>
</head>
<body ng-controller="mainCtrl">
        <ng-view></ng-view>
</body>

Answer 1

此错误表示AngularJS无法在项目中找到名为$localStorage的必需依赖项之一。

我怀疑您在代码中使用ngStorage来使用AngularJS在浏览器中处理本地存储。

首先，您需要确保已将其作为项目中的依赖项进行安装。请按照这些installation methods将其添加到您的项目中。

安装后，您需要确保在角度模块中将其声明为依赖项：

var app = angular.module('Jäsentietopalvelu', ["ngRoute", "ngStorage"]);

然后，只有您可以在项目中使用其组件。

Anguarjs;错误：[$ injector：unpr]尝试使用$ httpProvider进行令牌身份验证

1 个答案: