gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:50:18 24 4
gpt4 key购买 nike

我目前有一个基于 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 服务器上重写和其他一些事情。

最佳答案

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

就最佳实践而言,您可以遵循 angular-fullstack-generatormeanio项目。

您所做的看起来最接近 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');
};

关于javascript - AngularJS - 处理手动输入 URL 状态的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26309107/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com