2016-08-23 19 views
1

我試圖在我的play應用程序(與scala)中實現身份驗證的一個例子。我正在關注這個tutorial使用「使用嚴格」的函數格式。 angularjs身份驗證(與scala,玩框架)

因此,在視圖文件夾中,我創建了用於身份驗證的索引頁面。並補充這一點:

'use strict'; 

angular.module('Authentication') 


    .controller('LoginController', 
     ['$scope', '$rootScope', '$location', 'AuthenticationService', 
     function ($scope, $rootScope, $location, AuthenticationService) { 
      // reset login status 
      AuthenticationService.ClearCredentials(); 

      $scope.login = function() { 
       $scope.dataLoading = true; 
       AuthenticationService.Login($scope.username, $scope.password, function(response) { 
        if(response.success) { 
         AuthenticationService.SetCredentials($scope.username, $scope.password); 
         $location.path('/'); 
        } else { 
         $scope.error = response.message; 
         $scope.dataLoading = false; 
        } 
       }); 
      }; 
     }]); 

這:

'use strict'; 

angular.module('Authentication') 

.factory('AuthenticationService', 
    ['Base64', '$http', '$cookieStore', '$rootScope', '$timeout', 
    function (Base64, $http, $cookieStore, $rootScope, $timeout) { 
     var service = {}; 

     service.Login = function (username, password, callback) { 

      /* Dummy authentication for testing, uses $timeout to simulate api call 
      ----------------------------------------------*/ 
      $timeout(function(){ 
       var response = { success: username === 'test' && password === 'test' }; 
       if(!response.success) { 
        response.message = 'Username or password is incorrect'; 
       } 
       callback(response); 
      }, 1000); 


      /* Use this for real authentication 
      ----------------------------------------------*/ 
      //$http.post('/api/authenticate', { username: username, password: password }) 
      // .success(function (response) { 
      //  callback(response); 
      // }); 

     }; 

     service.SetCredentials = function (username, password) { 
      var authdata = Base64.encode(username + ':' + password); 

      $rootScope.globals = { 
       currentUser: { 
        username: username, 
        authdata: authdata 
       } 
      }; 

      $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line 
      $cookieStore.put('globals', $rootScope.globals); 
     }; 

     service.ClearCredentials = function() { 
      $rootScope.globals = {}; 
      $cookieStore.remove('globals'); 
      $http.defaults.headers.common.Authorization = 'Basic '; 
     }; 

     return service; 
    }]) 

.factory('Base64', function() { 
    /* jshint ignore:start */ 

    var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/='; 

    return { 
     encode: function (input) { 
      var output = ""; 
      var chr1, chr2, chr3 = ""; 
      var enc1, enc2, enc3, enc4 = ""; 
      var i = 0; 

      do { 
       chr1 = input.charCodeAt(i++); 
       chr2 = input.charCodeAt(i++); 
       chr3 = input.charCodeAt(i++); 

       enc1 = chr1 >> 2; 
       enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
       enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
       enc4 = chr3 & 63; 

       if (isNaN(chr2)) { 
        enc3 = enc4 = 64; 
       } else if (isNaN(chr3)) { 
        enc4 = 64; 
       } 

       output = output + 
        keyStr.charAt(enc1) + 
        keyStr.charAt(enc2) + 
        keyStr.charAt(enc3) + 
        keyStr.charAt(enc4); 
       chr1 = chr2 = chr3 = ""; 
       enc1 = enc2 = enc3 = enc4 = ""; 
      } while (i < input.length); 

      return output; 
     }, 

     decode: function (input) { 
      var output = ""; 
      var chr1, chr2, chr3 = ""; 
      var enc1, enc2, enc3, enc4 = ""; 
      var i = 0; 

      // remove all characters that are not A-Z, a-z, 0-9, +, /, or = 
      var base64test = /[^A-Za-z0-9\+\/\=]/g; 
      if (base64test.exec(input)) { 
       window.alert("There were invalid base64 characters in the input text.\n" + 
        "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" + 
        "Expect errors in decoding."); 
      } 
      input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 

      do { 
       enc1 = keyStr.indexOf(input.charAt(i++)); 
       enc2 = keyStr.indexOf(input.charAt(i++)); 
       enc3 = keyStr.indexOf(input.charAt(i++)); 
       enc4 = keyStr.indexOf(input.charAt(i++)); 

       chr1 = (enc1 << 2) | (enc2 >> 4); 
       chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
       chr3 = ((enc3 & 3) << 6) | enc4; 

       output = output + String.fromCharCode(chr1); 

       if (enc3 != 64) { 
        output = output + String.fromCharCode(chr2); 
       } 
       if (enc4 != 64) { 
        output = output + String.fromCharCode(chr3); 
       } 

       chr1 = chr2 = chr3 = ""; 
       enc1 = enc2 = enc3 = enc4 = ""; 

      } while (i < input.length); 

      return output; 
     } 
    }; 

    /* jshint ignore:end */ 
}); 

和finaly這樣的:

'use strict'; 

// declare modules 
angular.module('Authentication', []); 
angular.module('Home', []); 

angular.module('BasicHttpAuthExample', [ 
    'Authentication', 
    'Home', 
    'ngRoute', 
    'ngCookies' 
]) 

.config(['$routeProvider', function ($routeProvider) { 

    $routeProvider 
     .when('/login', { 
      controller: 'LoginController', 
      templateUrl: 'modules/authentication/views/login.html', 
      hideMenus: true 
     }) 

     .when('/', { 
      controller: 'HomeController', 
      templateUrl: 'modules/home/views/home.html' 
     }) 

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

.run(['$rootScope', '$location', '$cookieStore', '$http', 
    function ($rootScope, $location, $cookieStore, $http) { 
     // keep user logged in after page refresh 
     $rootScope.globals = $cookieStore.get('globals') || {}; 
     if ($rootScope.globals.currentUser) { 
      $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line 
     } 

     $rootScope.$on('$locationChangeStart', function (event, next, current) { 
      // redirect to login page if not logged in 
      if ($location.path() !== '/login' && !$rootScope.globals.currentUser) { 
       $location.path('/login'); 
      } 
     }); 
    }]); 

資產/ JavaScript的/ app文件夾和引用它們在我的主要與此:

<script src="@routes.Assets.versioned("javascripts/app/controllers.js")" type="text/javascript"></script> 
    <script src="@routes.Assets.versioned("javascripts/app/services.js")" type="text/javascript"></script> 
    <script src="@routes.Assets.versioned("javascripts/app/app.js")" type="text/javascript"></script> 

我對所有這些我都不熟悉不知道我是否錯過了什麼或別的什麼。 我得到的錯誤是:

Use the function form of "use strict". 

回答

0

只需將函數中的「use strict」包裝在代碼中即可。因此,而不是

"use strict"; 
angular.module('Authentication', []); 
angular.module('Home', []); 
// (...) 

使用這個代替

(function() { 
    "use strict"; 
    angular.module('Authentication', []); 
    angular.module('Home', []); 
    // (...) 
})(); 

您也可以使JSHint忽略錯誤

/*jshint -W097 */ 
"use strict"; 

angular.module('Authentication', []); 
angular.module('Home', []); 
// (...) 
+0

感謝您的重播 – Rajeun

0

使用的「使用嚴格」的函數形式。

這是什麼試圖告訴你不要把"use strict"放在你的文件的頂級範圍。它的意思是在功能內使用它。你可以通過在一個範圍的功能包裝你的代碼,看到頂部和底部的一行:

(function() { // The beginning of the scoping function 

    'use strict'; 

    angular.module('Authentication') 


    .controller('LoginController', ['$scope', '$rootScope', '$location', 'AuthenticationService', 
     function($scope, $rootScope, $location, AuthenticationService) { 
      // reset login status 
      AuthenticationService.ClearCredentials(); 

      $scope.login = function() { 
       $scope.dataLoading = true; 
       AuthenticationService.Login($scope.username, $scope.password, function(response) { 
        if (response.success) { 
         AuthenticationService.SetCredentials($scope.username, $scope.password); 
         $location.path('/'); 
        } else { 
         $scope.error = response.message; 
         $scope.dataLoading = false; 
        } 
       }); 
      }; 
     } 
    ]); 
})(); // The end of the function and the() to invoke it 

現在,"use strict"僅適用該功能及其內容之內。

+0

謝謝您的解釋 – Rajeun