如何在身份验证时从静态快捷页面提供整个 angularJS SPA?
How do I serve an entire angularJS SPA from a static express page upon authentication?
所以我为我工作的公司建立了一个 SPA,由于它显示的数据非常敏感,所以在我合并身份验证之前它不能上线。出于这个原因,我试图为登录构建一个静态快速页面,而不是在 SPA 中处理它。
目前我是这样做的:
- 为我的登录页面提供服务。
- 调用用于身份验证的 API 路由。
- 如果 SPA 服务成功。
- 如果不成功,显示相应的错误消息并重新呈现登录页面。
我之前用JWTs构建过一个认证方案,所以我不担心那部分。现在我只想通过单击一个按钮来为我的 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('/#/')
});
我觉得你有点糊涂了。在路由方面使用 express 作为 REST 引擎。 Angular routes 将负责显示逻辑并在客户端查看路由。
我建议您将 JSON 数据传递给前端 angular 并让它为您完成工作。
例如:
app.get('/', function (req, res) {
res.json({
title : "n562d",
strapline : "Please Log In"
})
});
您可以在端点访问 API:http://localhost:3000/
使用 $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('/')
});
对于angular路由,我建议你使用ui-router
示例:
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,您可以将其替换为您的控制器名称,与视图相同。
如果您需要更详细的答案,请告诉我,我会更新。希望对你有帮助。
所以我为我工作的公司建立了一个 SPA,由于它显示的数据非常敏感,所以在我合并身份验证之前它不能上线。出于这个原因,我试图为登录构建一个静态快速页面,而不是在 SPA 中处理它。
目前我是这样做的:
- 为我的登录页面提供服务。
- 调用用于身份验证的 API 路由。
- 如果 SPA 服务成功。
- 如果不成功,显示相应的错误消息并重新呈现登录页面。
我之前用JWTs构建过一个认证方案,所以我不担心那部分。现在我只想通过单击一个按钮来为我的 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('/#/')
});
我觉得你有点糊涂了。在路由方面使用 express 作为 REST 引擎。 Angular routes 将负责显示逻辑并在客户端查看路由。
我建议您将 JSON 数据传递给前端 angular 并让它为您完成工作。 例如:
app.get('/', function (req, res) {
res.json({
title : "n562d",
strapline : "Please Log In"
})
});
您可以在端点访问 API:http://localhost:3000/
使用 $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('/')
});
对于angular路由,我建议你使用ui-router
示例:
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,您可以将其替换为您的控制器名称,与视图相同。
如果您需要更详细的答案,请告诉我,我会更新。希望对你有帮助。