如何防止浏览器验证对话框angularjs

Question

我解决了我的this issue以下this tutorial。

但我遇到了另一个问题。在所有请求都可以发送csrf标记头之后，我将此教程应用于我的应用程序。但浏览器打开自定义验证对话框弹出。我实际上不能注销。我注销拦截器后继续发送令牌头。

这里是我的app.config：

var app = angular.module('app', ['ngRoute']); 

app.factory('CsrfTokenInterceptorService', ['$q', 
function CsrfTokenInterceptorService($q) { 

    // Private constants. 
    var CSRF_TOKEN_HEADER = 'X-CSRF-TOKEN', 
     HTTP_TYPES_TO_ADD_TOKEN = ['DELETE', 'POST', 'PUT']; 

    // Private properties. 
    var token; 

    // Public interface. 
    var service = { 
     response: onSuccess, 
     responseError: onFailure, 
     request: onRequest, 
    }; 

    return service; 

    // Private functions. 
    function onFailure(response) { 
     if (response.status === 403) { 
      console.log('Request forbidden. Ensure CSRF token is sent for non-idempotent requests.'); 
     } 

     return $q.reject(response); 
    } 

    function onRequest(config) { 
     if (HTTP_TYPES_TO_ADD_TOKEN.indexOf(config.method.toUpperCase()) !== -1) { 
      config.headers[CSRF_TOKEN_HEADER] = token; 
     } 

     return config; 
    } 

    function onSuccess(response) { 
     var newToken = response.headers(CSRF_TOKEN_HEADER); 

     if (newToken) { 
      token = newToken; 
     } 

     return response; 
    } 
}]); 

    app.config(function($routeProvider,$httpProvider) { 
     $routeProvider 

      // route for the home page 
      .when('/', { 
       templateUrl : 'pages/home.html', 
       controller : 'mainController' 
      }) 
      .when('/home', { 
       templateUrl : 'pages/home.html', 
       controller : 'mainController' 
          }) 
      .when('/about', { 
       templateUrl : 'pages/about.html', 
       controller : 'aboutController' 
      }) 

      // route for the login page 
      .when('/login', { 
       templateUrl : 'pages/login.html', 
       controller : 'mainController' 
      }) 
      .when('/helpRequest', { 
       templateUrl : 'pages/helpRequest.html', 
       controller : 'helpRequestController' 
      }) 
      .when('/queryHelpRequest', { 
       templateUrl : 'pages/helpQueryPage.html', 
       controller : 'helpQueryController' 
      }); 
      $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-TOKEN'; 
      $httpProvider.interceptors.push('CsrfTokenInterceptorService'); 
    }); 


    app.controller('mainController', function($rootScope, $scope, $http, $location) { 


    var authenticate = function(credentials, callback) { 

    var headers = credentials ? {authorization : "Basic " 
     + btoa(credentials.username + ":" + credentials.password) 
    } : {}; 

    $http.get('user', {headers : headers}).success(function(data) { 
     if (data.name) { 
     $rootScope.authenticated = true; 
     } else { 
     $rootScope.authenticated = false; 
     } 
     callback && callback(); 
    }).error(function() { 
     $rootScope.authenticated = false; 
     callback && callback(); 
    }); 

    } 

    authenticate(); 
    $scope.credentials = {}; 
    $scope.login = function() { 
     authenticate($scope.credentials, function() { 
     if ($rootScope.authenticated) { 
      $location.path("/home"); 
      $scope.error = false; 
     } else { 
      $location.path("/login"); 
      $scope.error = true; 
     } 
     }); 
    }; 

    $scope.logout = function() { 
    $http.post('logout').success(function() { 
     $rootScope.authenticated = false; 
     $location.path("/home"); 
    }).error(function(data) { 
     $rootScope.authenticated = false; 
    }); 
    } 



    }); 

这里是我的login.html：

<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> 
 
    <div class="panel panel-info" > 
 
     <div class="panel-heading"> 
 
      <div class="panel-title">Giriş Yap</div> 
 
      <p>{{ message }}</p> 
 
      <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Şifremi unuttum?</a></div> 
 
     </div> 
 

 
     <div style="padding-top:30px" class="panel-body" > 
 

 
      <div> 
 
       <form id="loginform" class="form-horizontal" 
 
         role="form" ng-submit="login()"> 
 

 
        <div style="margin-bottom: 25px" class="input-group"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
         <input id="loginUsername" type="text" class="form-control" 
 
           ng-model="credentials.username" name="username" value="" placeholder="E-POSTA"/> 
 
        </div> 
 

 
        <div style="margin-bottom: 25px" class="input-group"> 
 
         <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
 
         <input id="loginPassword" type="password" ng-model="credentials.password" class="form-control" name="password" placeholder="ŞİFRE"/> 
 
        </div> 
 

 
        <div style="margin-top:10px" class="form-group"> 
 
         <!-- Button --> 
 

 
         <div class="col-sm-12 controls"> 
 
          <input type="submit" id="btn-login" 
 
            class="btn btn-success" value="Giriş Yap"/> 
 
         </div> 
 
        </div> 
 
       </form> 
 
      </div> 
 
      <div id="login-alert" class="alert alert-danger col-sm-12" ng-show="error"> 
 
       <p class="error">Kullanıcı Adı veya Şifre Hatalı</p> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div>

如何防止浏览器验证对话框？请问你能帮帮我吗？

Answer 1

我解决了我自己的问题，我回答了我自己的问题。

我发现this answer和我申请。之后，隐藏了浏览器身份验证模式对话框。