表达 4 + 角度 2 HTML 5 路由问题

Express 4 + Angular 2 HTML 5 Routing Concerns

本文关键字:路由 问题 HTML 角度 表达      更新时间:2023-09-26

我正在用Express 4和Angular 2制作一个基本的Web应用程序。在这里,除了我使用其HTML 5路由器之外,Angular 2没有任何特定的功能。

下面是应用的路由工作流:

该应用程序有两种主要的服务器端路由配置。两者看起来都与此相似:

/* GET home page. */
router.get('/', authenticationHelpers.isAuth, function(req, res, next) {
  res.render('index');
});
/* GET login page. */
router.get('/login', authenticationHelpers.isNotAuth, function(req, res, next) {
  res.render('login');
});

这些显式管理用户路由到 //login 的两种情况。

但是,如果用户已登录并且能够访问/来呈现索引快速视图,则用户可以利用 HTML5 路由。其中包括如下所示的网址:

localhost:5000/user
localhost:5000/profile
localhost:5000/profile/settings

A. 问题

显然没有 router.get('/user') ,也不应该有,因为这都是 Angular 2 路由器完成的前端工作。但是,要启用允许用户简单地键入 localhost:5000/profile/settings 的链接,并让站点将您路由到索引文件(假设您已登录),然后将您(使用 angular 2 的 HTML 5 路由)路由到您自己的/profile/settings我不得不将这段代码放在我的app.js中:

app.all("/*", function(req, res, next) {
  res.render('index');
});

不过,这给了我一个大问题。如果您未登录并且您获得了链接localhost:5000/profile/settings它将呈现索引视图,因为它仅在上面的router.get('/')路由代码上运行authenticationHelpers.isAuth函数。我也希望能够在快速或角度中不存在的路由上抛出 404 错误。

但是,在我看来,要启用此功能,Express 必须了解所有 HTML 5 路由选项以及快速路由选项。对我来说,这打破了路由问题的分离,因为如果我更改了 HTML 5 角度路由,我还必须更改 express(很可能,查看下面的解决方案)。我想要所有这些功能,但是没有这些信息在路由处理程序之间泄漏,但是我根本看不到解决方法。如果有人能帮助我找到更好的方法来做到这一点,那就太好了!如果信息共享或与快速路线的角度路线是我开发最优化的精益解决方案的唯一方法,我可以在下面:

潜在解决方案

router.get(['/', '/user/', '/profile/*'], authenticationHelpers.isAuth, function(req, res, next) {
  res.render('index');
});

将其添加到所有路由的末尾

app.all("/*", authenticationHelpers.isAuth, function(req, res, next) {
  res.render('index');
});

应该解决你的问题