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

Question

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

但是这只适用于我从我的基础导航,即从'/'导航,并仅在我的应用程序中导航.

如果我手动输入诸如'/ page1'之类的URL,它将丢失全局用户对象,但是如果我转到我的根主页并通过该站点导航到'/ page1'.然后没关系,它会在Service对象中看到全局用户对象.

所以我想这是因为整页刷新失去了全局值,在这里通过网站导航不会刷新,所以你保留所有的变量.

有些事情需要注意:

1. 我已启用HTML5Mode,使用前缀'!'.
2. 我使用UI-Router
3. 我用'/'标签
4. 我有一个关于快递的重写规则,在加载我的所有路由后,我有一个最后一个路由,它接受所有'/*'并发回root index.html文件,因为这是angularjs的东西.

我只是想知道人们一般在这做什么？他们是否还原标准cookie和本地存储解决方案？我对角度很新,所以我猜这里有图书馆.

我只是想知道处理这个或大多数人做什么的推荐方法,所以我正确地以正确的方式和角度方式对齐.

更新:

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

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

所以我原本预计root上的任何代码都会执行,所以它应该类似于通过站点导航或键入地址栏.我一定错过了具有这种效果的Angular.

更新2

对,所以更多的调查引导我这样:

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

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

使用哈希爆炸模式,它是有效的,这是因为使用哈希爆炸模式,即使我在浏览器中键入URL,它也不会导致刷新,在使用HTML5模式时,它会刷新.所以现在我能想到的解决方案是使用sessionStorage.

除非有更好的选择？

更新3:

使用HTML5Mode时,处理此问题的最佳方法是,您只需要在快速服务器上重写一些其他内容.

Answer 1

我认为你说得对，但你可能想查看你的应用程序可能需要的所有路由，并只考虑一些基本结构（api、用户、会话、部分等）。这似乎只是其中一个问题，其复杂程度取决于您的意愿。

至于最佳实践，您可以遵循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');
};