【问题标题】:Express 4 + Angular 2 HTML 5 Routing ConcernsExpress 4 + Angular 2 HTML 5 路由问题
【发布时间】:2016-06-11 23:06:11
【问题描述】:

我正在使用 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

问题

显然没有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 函数。我也希望能够在 express 或 angular 中不存在的路线上引发 404 错误。

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

潜在解决方案

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

【问题讨论】:

    标签: javascript node.js express routing angular


    【解决方案1】:

    将此添加到所有路线的末尾

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

    应该能解决你的问题

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-04-23
      • 1970-01-01
      • 2017-10-08
      • 2023-03-27
      • 2017-08-24
      • 1970-01-01
      • 2017-11-22
      相关资源
      最近更新 更多