Question

这是流程：

在前端，用户通过提供用户名和密码登录。
如果凭据正确，服务器将向用户回复令牌。
现在应该将用户重定向到主页（问题此处）。我已经通过以下代码在标头中设置了令牌：$ http.defaults.headers.common ['X-Auth-Token'] = token;

此外，当我执行http.get方法时，我收到“OK”响应

$http({ method: 'GET',

    url: '/home/',

    headers: {
        'X-Auth-Token': token
    }
}).then(function successCallback(response) {
    console.log(response.statusText);
}

现在，问题在于当我使用$ window.location.href =“/ home”时，服务器会响应“未授权令牌”，因为服务器总是在每个请求的标头中都需要一个令牌。在命令window.location.href中，我无法设置标题。

将用户重定向到主页的替代方法是什么。假设服务器始终检查访问令牌的标头。

提前致谢!!!

Answer 1

AFAIK如果您正在使用HTTP重定向，例如设置window.location.href，则无法自定义标头。使用表格帖子时也不能这样做。使用cookie代替这些目的。

Ajax（XMLhttpRequest）可能是唯一支持设置自定义标头的方法。

如果您不介意使用角度路由（但是这样做可能会暴露js代码中的某些逻辑，这些逻辑只应向经过身份验证的用户公开），您可以为resolve添加resolveRedirectTo每次路由更改时都发出一个ajax请求来检查身份验证状态。

修改

对于使用角度路由，基本思路是要求用户向服务器发送带有自定义标头的ajax请求，以检查他/她是否有权访问该页面。请查看以下代码和this fiddle

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

    $routeProvider.
    when('/home', {
        templateUrl:"home.html" ,
        controller: 'MainController',
        resolve:{
            isLogin:function($q, $http,$location) {
              var deferred = $q.defer();
              //verify the user via an ajax request every time the user attempts to visit `/home`
              //here since u have already set the custom headers for $http upon signing in, the next request will be with the header.
              //the follow test url will return {isLogin:true}
              $http({method: 'GET', url: 'http://echo.jsontest.com/isLogin/true'})
                  .success(function(data) {


                      if(data.isLogin){
                        deferred.resolve(data.isLogin); //  no need to redirect
                      }
                      else{
                        $location.path("/guest");// redirect to guest page if not authorized
                        deferred.reject(); 
                      }
                  })
                  .error(function(data){
                  //error
                      $location.path("/guest");
                      deferred.reject();
                  });

              return deferred.promise;  
          }
        }
    }).
    when("/guest",{
        templateUrl: "guest.html",
      controller: 'GuestController',
    })
    .otherwise({redirectTo:'/guest'})
}]);

如何使用访问令牌机制重定向angular.js中的用户？

1 个答案: