5

我目前有一个基于 meanjs 堆栈样板的设置，当我浏览网站的 URL 时，我可以让用户以这种“登录”状态登录。这是由于将用户对象保存在全局可用的服务中。

但是，这仅在我从基本根目录（即从“/”）导航并且仅在我的应用程序中导航时才有效。

如果我手动输入诸如“/page1”之类的 URL，它将丢失全局用户对象，但是如果我转到我的根主页并通过该站点导航到“/page1”。然后就好了，它在Service对象中看到了全局用户对象。

所以我猜这是因为整页刷新丢失了通过网站导航的全局值，所以你保留了所有变量。

需要注意的一些事项：

  1. 我启用了 HTML5Mode，使用前缀“！”。
  2. 我使用 UI 路由器
  3. 我使用带有'/'的标签
  4. 我在 express 上有一个重写规则，在加载我的所有路由后，我有最后一个路由将所有 '/*' 带到并发送回根 index.html 文件，因为那是 angularjs 的东西所在的位置。

我只是想知道人们通常在这里做什么？他们会恢复标准 cookie 和本地存储解决方案吗？我对 Angular 还很陌生，所以我猜那里有图书馆可以解决这个问题。

我只是想知道处理此问题的推荐方法或大多数人会做什么，这样我才能以正确的方式和我想的角度方式对齐。

更新：

如果我通过地址栏手动导航到我网站上的另一个 URL，我会丢失我的用户状态，但是如果我通过地址栏手动返回我的根目录，我的用户状态会再次出现，所以这不仅仅是失去状态在窗口刷新。所以它似乎与在根 URL 上运行的代码有关。

我有一个快速重写，手动输入的 URL（由于 HTML5 位置模式）应该首先返回 index.html，因为它包含 AngularJs 文件，然后 UI-Route 接管并正确路由它。

所以我本来预计根目录上的任何代码都会执行，所以它应该类似于通过站点导航或在地址栏中输入。我一定错过了一些关于 Angular 的东西。

更新 2

是的，所以更多的调查使我想到了这一点：

<script type="text/javascript">
    var user = {{ user | json | safe }};
</script>

这是 index.html 的服务器端代码，我猜这在通过手动 URL 将页面刷新到新页面时不会运行。

使用 hash bang 模式，它可以工作，这是因为在 hash bang 模式下，即使我在浏览器中输入一个 URL，它也不会导致刷新，而使用 HTML5 模式，它会刷新。所以现在我能想到的解决方案是使用 sessionStorage。

除非有更好的选择？

更新 3：

使用 HTML5Mode 时处理此问题的最佳方法似乎是您只需要在快速服务器上重新编写以及其他一些事情。

4

2 回答 2

1

最后，我确实遇到了很多麻烦，但设法通过做一些可以分解为步骤的事情来让它工作，这适用于那些使用 HTML5Mode 的人。

1)在 Angular 中启用 HTML5Mode 后，在您的服务器上设置重写，以便它发回包含 Angular src js 文件的 index.html。注意，这个重写应该在你的静态文件和正常的服务器路由之后（例如在你的 REST API 路由之后）。

2）确保角度路线与您的服务器路线不同。因此，如果您有一个前端状态 /user/account，那么就没有服务器路由 /user/account 否则它不会被调用，请将您的服务器端路由更改为 /api/v1/server/route 之类的东西。

3)对于前端中所有旨在触发直接调用服务器而无需通过 Angular 状态/路由的锚标记，请确保添加“target=_self”。

于 2014-11-07T23:35:09.270 回答
1

我认为您说得对，但您可能想查看您的应用程序可能需要的所有路由，并只考虑一些基本结构（api、用户、会话、部分等）。这似乎是您想让它变得复杂的问题之一。

至于最佳实践，您可以遵循angular-fullstack-generator或meanio项目。

你所做的看起来最接近 mean.io，主要是因为他们也使用 ui-router，尽管他们似乎保留了 hashbang，而且看起来更像是具有一些独立 SPA 页面功能的 SEO 友好。在我在这里解释之前，您可能可以安装它并找到代码 -

npm install -g meanio
mean init name
cd [name] && npm install

angular-fullstack 看起来像这样，这是更典型路由的一个很好的例子：

// Server API Routes
app.route('/api/awesomeThings')
  .get(api.awesomeThings);

app.route('/api/users')
  .post(users.create)
  .put(users.changePassword);
app.route('/api/users/me')
  .get(users.me);
app.route('/api/users/:id')
  .get(users.show);

app.route('/api/session')
  .post(session.login)
  .delete(session.logout);

// All undefined api routes should return a 404
app.route('/api/*')
  .get(function(req, res) {
    res.send(404);
});

// All other routes to use Angular routing in app/scripts/app.js
app.route('/partials/*')
  .get(index.partials);
app.route('/*')
  .get( middleware.setUserCookie, index.index);

然后为了简单起见，使用一些正则表达式找到部分，并在不渲染的情况下交付，例如：

var path = require('path');

exports.partials = function(req, res) {
 var stripped = req.url.split('.')[0];
 var requestedView = path.join('./', stripped);
 res.render(requestedView, function(err, html) {
   if(err) {
     console.log("Error rendering partial '" + requestedView + "'\n", err);
     res.status(404);
     res.send(404);
   } else {
     res.send(html);
   }
 });
};

并呈现索引：

exports.index = function(req, res) {
  res.render('index');
};
于 2014-10-10T23:48:26.140 回答