Anguarjs; Fehler: [$ injector: unpr] versucht, Token-Authentifizierung mit $ httpProvider

zu tun Ich versuche, eine einfache tokenbasierte Authentifizierung einzurichten und bisher die Token erstellen und speichern sie in lokalen Speicher, aber wenn ich versuchen, einen Abfangjäger zu erstellen, die das Token zu jeder Anforderung enthält schickte ich eine seltsame Fehlermeldung erhalten:

Error: [$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%3C-%20%24route

Hier ist der Code, den ich für den Interceptor verwenden

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); 
         } 
       }; 
     }]); 
}])

auf welche Weise sollte ich das schaffen Abfangjäger, damit es richtig funktioniert? Soll es in module.config oder anderswo sein?

EDIT:

Hier ist mein Index -page

<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>

Quelle

2017-12-07 nyoatype

Sie drücken '$ localStorage' in Ihren $ httpProvider, während es nicht in Ihre Konfiguration injiziert wird. Ändere die Konfiguration so, dass sie es hat: '.config (['$ localStorage', ..., Funktion ($ localStorage, ...' –

Ich habe $ localStorage zu .config hinzugefügt, und jetzt bekomme ich einen Fehler wie Fehler: [ $ injector: modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=J%C3%A4senietopalvelu&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs .org% 2F1.6.6% 2F% 24injektor% 2Funpr% 3Fp0% 3D% 2524localStorage% 0AM% 2F% 3C% 40https% 3A% 2F – nyoatype

Das ist ein gutes Zeichen, Ihr erster Fehler wurde behoben, jetzt haben Sie den zweiten Modul muss Dependence-Injektion zu "ngState" haben. 31piy hat bereits eine [Antwort] (https://Stackoverflow.com/a/47694576/8495123) –

Dieser Fehler bedeutet, dass AngularJS nicht einer der erforderliche Abhängigkeit in Ihrem Projekt mit dem Namen $localStorage finden kann.

Ich vermute, Sie verwenden ngStorage in Ihrem Code, um mit dem lokalen Speicher im Browser mit AngularJS umzugehen.

Zuerst müssen Sie sicherstellen, dass Sie es als eine Abhängigkeit im Projekt installiert haben. Befolgen Sie diese installation methods, um es in Ihrem Projekt zu erhalten.

Nach der Installation müssen Sie es als eine Abhängigkeit in Ihrem Winkelmodul zu erklären, um sicherzustellen:

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

Nur dann können Sie die Komponenten in Ihrem Projekt verwenden.

Quelle

2017-12-07 11:55:10 31piy

Ich installierte ngStorage mit npm. Danach habe ich auch versucht, den Link zu verwenden Installieren Sie das Modul, aber in beiden Fällen habe ich den folgenden Fehler: Fehler: [$ injector: modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=J%C3%A4sentietopalvelu&p1=%5B % 24injektor% 3Amoduler% 5D % 20http% 3A% 2F% 2Ferrors.angularjs.org% 2F1.6.6% 2F% 24injektor% 2Fmodulerr% 3Fp0% 3DngStorage% 26p1 – nyoatype

@nyoatype - Sie laden das Skript für ngStorage, bevor Sie AngularJS laden. Bewegen Sie sich nach dem Skript-Tag von AngularJS. – 31piy

Anguarjs; Fehler: [$ injector: unpr] versucht, Token-Authentifizierung mit $ httpProvider

Antwort

Verwandte Themen