Angular JS 使用 http post 重定向发送公共标头答案

【问题标题】：Angular JS send common headers with http post redirectAngular JS 使用 http post 重定向发送公共标头
【发布时间】：2016-05-12 11:46:10
【问题描述】：

我正在使用 angular js 和 node express 使用 jwt 作为身份验证机制。我在 Angular 中使用 http post 作为我的用户名和密码，它成功生成了 jwt 令牌。但不可能重定向任何其他页面。如何通过 Angular JS 将该令牌设置为其他页面中的标题。

我的角度控制器是，

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

  app.controller('AuthenticateCtrl', function($scope, $http) {

      $scope.login = function() {
          option={'name':$scope.name,'password':$scope.password}
          $http({
          method : "POST",
          url : "/api/authenticate",
          data:option
          }).then(function mySucces(response) {
          $scope.message = response.data;
          //$scope.getData(response.data);
          $http.defaults.headers.common['x-access-token'] = response.data;
          window.location.href = '/api/home';
          alert("You are logged in.!");
          }, function myError(response) {
          $scope.message = response.statusText;
          //console.log(response.data);
          console.log(response.statusText);
          var alertPopup = $ionicPopup.alert({
              title: 'Login failed!',
              template: 'Please check your credentials!'
          });
          });
          }

  });

HTML 脚本是，

  <body ng-controller="AuthenticateCtrl">
  <div class="container">
  <h2>.</h2>
    <input type="text" name="name" ng-model="name" placeholder="Name" required="" autofocus="" class="form-control" /></p>
    <input type="password" name="password" ng-model="password" placeholder="Password" required="" class="form-control" /></p>
    <button ng-click="login()" class="btn btn-lg btn-primary btn-block">Login</button>
    <hr />
    {{ message }}
</div>
  </body>

POST请求处理节点js部分是，

apps.get('/home', function(req, res, next) {
    res.sendFile(dirname+'/public/home.html');
    });

但是重定向的主页显示

{"success":false,"message":"No token provided."}

消息。这是我的身份验证失败消息。任何人都请帮我解决这个问题。

【问题讨论】：

标签： angularjs redirect express header http-post

【解决方案1】：

您应该使用an interceptor 设置x-access-token，您应该使用routing 进行导航。您不应使用 window.location.href 在 Angular SPA 中导航。

示例拦截器如下所示：

app.factory('sampleInterceptor', ['$location', function ($location) {
    var sampleInterceptorFactory = {};
    var _request = function (config) {
        config.headers = config.headers || {};
        config.headers['x-access-token'] = authData;
        return config;
    }
    sampleInterceptorFactory.request = _request;
    return sampleInterceptorFactory;
}]);

一个示例路由器如下所示：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home', {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
      }).
      when('/login', {
        templateUrl: 'templates/login.html',
        controller: 'LoginController'
      }).
      otherwise({
        redirectTo: '/login'
      });
  }]);

【讨论】：

拦截器和路由如何以角度工作。你能举个例子吗？
是的，我已经编辑了答案以包含两者的示例。
当我使用路由器重定向时，url 前有一个#。
您可以使用stackoverflow.com/q/14771091/385280中的解决方案将#去掉。