如何在身份验证时从静态express页面提供整个angularJS SPA

Question

所以我为我工作的公司建立了一个SPA，由于它显示的数据非常敏感，在我加入身份验证之前，它无法上线。出于这个原因，我试图构建一个用于登录的静态express页面，而不是在SPA中处理这个页面。

目前我是这样做的：

1. 提供我的登录页面
2. 调用用于身份验证的API路由
3. 如果成功，服务SPA
4. 如果不成功，则显示相应的错误消息并重新呈现登录页面

我之前已经用JWT构建了一个身份验证方案，所以我不担心这部分。现在，我只想点击一个按钮来提供我的SPA服务。如果我删除下面的路由并转到主页，我的应用程序将正常加载。我的问题是，我试图路由到angular应用程序的主页（"/#/"），并快速呈现登录页面。

我主页上的按钮发出获取登录请求。我希望这个重定向到我已经建立的SPA。看起来它应该很简单，但我不知道如何为我的生活做它。

//Login routes, success delivers angular SPA
app.get('/', function (req, res) {
  res.render('index.jade', {
    title : "n562d", 
    strapline : "Please Log In"
  })
});
app.get('/login', function (req, res) {
  res.redirect('/#/')
});

Answer 1

我觉得你有点困惑。当涉及到路由时，使用express作为REST引擎角度路由将负责客户端的显示逻辑和视图路由。

我建议您将JSON数据传递给前端angular，让它为您完成任务。例如：

app.get('/', function (req, res) {
  res.json({
    title : "n562d", 
    strapline : "Please Log In"
  })
});

您可以在端点http://localhost:3000/访问API使用$resource服务访问express端点：

示例：

var MyResource = $resource('/');
 var myResource = new MyResource();
 myResource.$get(function(result){
   //result holds -->{title : "n562d", strapline : "Please Log In"}
   //use $location to change the uri, which is handled by Angular route config
   $location.path('/') 
 });

对于角度路由，我建议你使用ui路由器

示例：

function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/");
     $stateProvider
     .state('index', {
      url: "/",
      templateUrl: 'app/authorization/index.tpl.html',
      controller: 'AuthController'
    })
     .state('login', {
      url: "/login/",
      templateUrl: 'app/authorization/login.tpl.html',
      controller: 'AuthController'
    })
    .state('signup',{
      url: "/signup/",
      templateUrl : 'app/authorization/signup.tpl.html',
      controller: 'AuthController'
    });
}
]);

请注意：我刚刚将我的控制器命名为AuthController，您可以将其替换为您的控制器的名称，与视图相同。

如果你需要更详细的答案，请告诉我，然后我会更新它。我希望它能有所帮助。