在 Express 服务器上成功调用 api 后使用角度路由重定向页面

在使用角度路由的单页面应用程序中，如何在 api 调用后重定向页面。就我而言，我想在用户调用登录 api 后将用户重定向到个人资料页面。所以这就是我认为可行的方法，但事实并非如此。

在客户端，main.js。我已经设置了角度路由

app.config(function($routeProvider){   $routeProvider
//the home page display
.when('/', {
  templateUrl: 'main.html',
  controller: 'mainController'
})

.when('/login', {
  templateUrl: 'login.html',
  controller: 'loginController'
})

.when('/signUp', {
  templateUrl: 'signUp.html',
  controller: 'signUpController'
})

.when('/profile', {
  templateUrl: 'profile.html',
  //controller: 'mainController'
}); });

我从我的控制器调用 /login post api

app.controller('authController', function($scope, $http, $rootScope, $location){   
  $scope.user = {username: '', password: ''};   
  $scope.error_message = '';

  $scope.login = function(){
    $http.post('/login', $scope.user).success(function(data){
      if(data.state == 'success'){
        //set username authenticated property to true after successful log in
        //I am only pasting some of my code here, more logic before controller
        $rootScope.authenticated = true;
        $rootScope.current_user = "james";
        $location.path('/profile');
      }
      else{
        $scope.error_message = data.message;
      }
    });   
  }; 
});

这是我的登录 api

router.post('/login', passport.authenticate('local-login', {
        successRedirect : '/success', // redirect to the secure profile section
        failureRedirect : '/failure', // redirect back to the signup page if there is an error
        failureFlash : true // allow flash messages
    }));

当成功时，它会调用 success，它会发回数据，该数据应触发 $http.post 中的回调，并通过 $location.path('/profile'); 重定向页面。但是，回调未被调用，我的页面显示来自 res.send 的用户信息

//sends successful login state back to angular
    router.get('/success', function(req, res){
        res.send({state: 'success', user: req.user ? req.user : null});
    });

我走在正确的轨道上吗？我只是按照微软的教程https://www.microsoftvirtualacademy.com/en-us/training-courses/mean-stack-jump-start-8442 https://www.microsoftvirtualacademy.com/en-us/training-courses/mean-stack-jump-start-8442但他们在 github 上完成的页面甚至无法工作，所以它不能帮助我调试我的这个问题。

Using successRedirect and failureRedirectin Passport 会将客户端重定向到指定的页面，这将阻止客户端 AngularJS 路由的发生。您登录后看到用户信息的原因是您的客户端被重定向到/success页面，而不是实际响应原始请求。然后，客户端使用 GET 请求获取成功页面，然后使用用户信息响应新的 GET 请求。

我建议在使用 AngularJS 时保留 node.js 重定向，因为您可能想在客户端处理重定向：

router.post('/login', passport.authenticate('local-login'), function(req, res){
    res.send(req.user);
});

如果用户未经身份验证，内联函数将永远不会执行。相反，护照将直接响应 401 错误状态，正文为“未经授权”。因此success状态不是必需的。在客户端，您应该使用.error()函数来处理 401 错误，而不是检查你的状态变量：

$http.post('/login', $scope.user).success(function(user){
    $rootScope.authenticated = true;
    $rootScope.current_user = "james";
    $location.path('/profile');
  })
 .error(function(err){
    $scope.error_message = err;
  });

如果您想传回关于请求未经授权的更具体原因（这并不总是一个好主意），您可以使用 flash 消息，并从 Angular 发出另一个 GET 请求以获取更详细的授权失败消息。