如何在前端使用 SPA 设置 Sails.js 路由以支持 pushstate

Posted 2023-03-03

【中文标题】如何在前端使用 SPA 设置 Sails.js 路由以支持 pushstate

【英文标题】：How to setup Sails.js routes to support pushstate with a SPA on the frontend

【发布时间】：2014-05-11 06:59:46

【问题描述】：

如何设置 SailsJS 路由以支持 pushstate，但仍然能够服务以 /api 为前缀的请求以及服务静态资产？

使用：

带有pushState: true 的主干1.x 帆 0.10.x

此thread 的建议解决方案是使用/* 通配符并将所有内容重定向到索引视图。

/path/to/app/config/routes.js

'/*': 
  view: 'index' 

问题是这会将所有内容重定向到索引。包括静态文件资产， express.static 中间件似乎没有效果，这条路线以某种方式优先。

此外，下面的这个前缀没有任何效果，因为上面的路由优先，但是如果我只删除通配符，前缀就可以工作，即'/': view: 'index'

/path/to/app/config/blueprint.js

module.exports.blueprints = 
    ...
    prefix: '/api',
    ...

显然，这似乎不是 SailsJS 的核心问题，而是我对 expressjs 路由器的了解最少，因为这就是sailsjs 所使用的。

理论上，我可以明确列出所有以资产为前缀的路由并拥有一个控制器来服务所有路由，因为它们是众所周知且静态的，即'/js*': controller: 'AssetsController', action: 'serve'，以此类推'/styles*'、'/images*'、@987654331 @，'/fonts*'，但我真的很犹豫，我希望有更好的实践解决方案。

这也不能解决这个路由/api通配符'/*'的问题

【参考方案1】：

尝试更新您的 config/404.js 文件。

删除以下内容：

  res.status(result.status);
  res.render(viewFilePath, function (err) 
    // If the view doesn't exist, or an error occured, send json
    if (err)  return res.json(result, result.status); 

    // Otherwise, serve the `views/404.*` page

    res.render(viewFilePath);
  );

添加这个：res.redirect("/");

干杯

【讨论】：

这将全面禁用 404 页面，即使对于不存在的 /api 路由也是如此......

@ScottGress 你是对的，除非我当然检查req.wantsJSON 并且我将我的字体结束/api 请求始终请求JSON。 @tUrG0n 你的解决方案很接近，除了我不想 redirect('/') 因为那会修改 URL，而是我可以在函数顶部只使用 return this.res.view('homepage')，哦，在 sails 0.10.0-rc4 中似乎 config/404.js移至api/responses/notFound.js，但逻辑相同。但是，重载 404 路线似乎有点 hacky，我想我和 @ScottGress 的回答一样，这是正确的做法。

【参考方案2】：

如果您愿意使用development version of Sails from GitHub，您可以使用skipRegex 路由选项让您的通配符路由忽略API 请求，并使用skipAssets 选项让它忽略资产URL：

'/*' : view: 'index', skipAssets: true, skipRegex: /^\/api\/.*$/

否则，您可以创建一个控制器来为您的视图提供服务，并在操作代码中添加代码以跳过无意匹配的 URL：

// api/controllers/StaticController.js
module.exports = 
   index: function(req, res, next) 
      if (req.path.match(/\..*/g) || req.path.match(/^\/api\/.*$/)) 
         return next();
      
      return res.view('index');
   

然后在/config/routes.js:

'/*': 'StaticController.index'

......

【讨论】：

我在 0.10.0-rc4，所以 - 谢谢你的第一个建议是我正在寻找的。​​span>

只是想指出正则表达式模式需要从/ 开始，所以skipRegex: /^\/api\/.*$/ - 我编辑了你的帖子。谢谢

感谢您的回答。如何从公共文件夹而不是视图中引用 index.html？

我编辑为从公共文件夹而不是视图提供索引文件return res.sendfile('public/dev/index.html');