javascript - AngularJS - 处理手动输入 URL 状态的最佳方式

Question

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

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

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

所以我猜这是由于整页刷新丢失了全局值而发生的，在该页面中，通过站点导航不会进行刷新，因此您保留了所有变量。

一些注意事项:

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

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

我只是想知道处理这个问题的推荐方法是什么，或者大多数人是怎么做的，只是为了让我以正确的方式和我认为的 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 时处理此问题的最佳方法是您只需要在 express 服务器上重写和其他一些事情。

Answer 1

我认为您是对的，但您可能想要查看您的应用程序可能需要的所有路由，并只考虑一些基本结构(api、用户、 session 、部分等)。它看起来就像是那些你想让它变得多么复杂的问题之一。

就最佳实践而言，您可以遵循 angular-fullstack-generator或 meanio项目。

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

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');
};