在快速服务器上成功调用 api 后，使用 angular 路由重定向页面

Question

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

在客户端，main.js。我设置了 angular 路由

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 但是他们在 github 上完成的页面甚至不起作用所以它不能帮助我调试我的这个问题。

Answer 1

你似乎对前端和后端想要在这里做什么有轻微的阻抗不匹配。您的 AngularJS 代码期望向 API 端点发送 POST 并返回 200（成功）以及一些 JSON 数据，这些数据告诉它有关成功或失败的信息登录尝试。

后端认为它会收到 POST 然后将调用者重定向到新位置。至少我是这样读的。它不仅仅是用 HTTP 响应代码 200 或错误代码发回一些数据。

我想你想调整后端代码以简单地 return 数据到前端以获得你期望的结果。

Answer 2

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

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

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

如果用户未通过身份验证，内联函数将永远不会执行。相反，passport 将直接响应 401 错误状态，正文为 "Unauthorized"。因此不需要 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;
  });

如果您想返回一个更具体的原因，说明请求未被授权的原因（这并不总是一个好主意），您可以使用即时消息，并从 angular 发出另一个 GET 请求到获取更详细的授权失败消息。

Answer 3

到目前为止，我还没有看到 Ajax 调用 API 重定向到页面的成功。我们有类似的情况，其中 API 调用可能会导致重定向到错误页面。我们想在服务器中处理它，而不是让 UI (Angular) 来处理。但是，看到 none 的重定向方法（如 res.redirect）正在工作，这真是令人沮丧。我们的场景是 Angular 通过 Ajax 进行 API 调用，Node.js 上的 API 运行应该重定向到 html 页面。

在快速服务器上成功调用 api 后，使用 angular 路由重定向页面

redirecting a page with angular routing after successfully calling an api on express server

node.js

express

angularjs

mean-stack

passport.js