在快速服务器上成功调用 api 后重定向具有角度路由的页面

Posted 2023-03-07

【中文标题】在快速服务器上成功调用 api 后重定向具有角度路由的页面

【英文标题】：redirecting a page with angular routing after successfully calling an api on express server

【发布时间】：2015-10-07 19:34:21

【问题描述】：

在使用角度路由的单页面应用程序中，如何在 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
    ));

当它成功时，它会调用成功，它会发回应该触发 $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 上完成的页面甚至都不起作用，所以它不能帮助我调试我的这个问题。

【问题讨论】：

你为什么不用res.redirect()？

@remus 我试过它不起作用。我得到 404 错误页面未找到。我假设 res.redirect 调用我猜会寻找 profile.ejs 的快速路由，但我想重定向到角度路由的 profile.html

啊。 ***.com/questions/19370606/…

您是否尝试在 $http 回调中设置断点以查看数据的值是多少？

对不起。我按照您的建议设置断点并意识到我犯了一个愚蠢的错误，我从未调用过 login()。我的错。感谢您的时间和帮助

【参考方案1】：

到目前为止，我还没有看到将 Ajax 调用重定向到页面的 API 调用成功。我们有类似的情况，API 调用可能会导致重定向到错误页面。我们想在服务器中处理它，而不是要求 UI（Angular）来做。但是看到像 res.redirect 这样的重定向方法都不起作用，这令人沮丧。 我们的场景是 Angular 通过 Ajax 进行 API 调用，并且在 Node.js 上运行的 API 应该重定向到一个 html 页面。

【参考方案2】：

在护照中使用successRedirect 和failureRedirect 会将客户端重定向到指定页面，这将阻止您的客户端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 请求以获得更详细的授权失败消息。

【讨论】：

@veggiesaurus 如何传递 Flash 消息。通常没有角度我像 req.flash();但是当使用 Angular 时该怎么做。 ***.com/questions/42903783/…

【参考方案3】：

您似乎对前端和后端想要在这里做的事情有轻微的阻抗不匹配。您的 AngularJS 代码希望对 API 端点进行 POST 并返回 200（成功）以及一些告诉它有关登录尝试成功或失败的 JSON 数据。

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

我认为您想调整后端代码以简单地将数据返回到前端以获得您期望的结果。

【讨论】：

这不是我的成功 api 在做什么吗？ router.get('/success', function(req, res) res.send(state: 'success', user: req.user ? req.user : null); );

嗯。可能是这样。您必须原谅我对 AngularJS 很满意，但对 Express 则不然。所以让我们尝试一件事来确认。您能否使用 Postman (chrome.google.com/webstore/detail/postman/…) 之类的工具为您创建 POST 并检查返回的内容，以确保它不是针对客户端的重定向，而只是常规的 200 响应？

或者，我们也可以直接切换到浏览器中的 Chrome 开发人员工具并查看网络选项卡，以查看 API 调用发送和接收的确切内容（包括响应代码），如果您'宁愿那样做。