javascript 如何在客户端单页应用程序中管理服务器用户会话

How to manage server user session within client side single page app

提问by user3317868

I've been fumbling around with different client side technologies, like AngularJS, EmberJS, even trying to use straight JQuery and figure out how to use ReactJS with it. That aside, my goal is to build a single page app using json in between the client and a Java Jersey 2 jax-rs back end api.

我一直在摸索不同的客户端技术，比如 AngularJS、EmberJS，甚至尝试直接使用 JQuery 并弄清楚如何使用 ReactJS。除此之外，我的目标是在客户端和 Java Jersey 2 jax-rs 后端 api 之间使用 json 构建一个单页应用程序。

I have two stumbling blocks right now. Some info though..I am deploying my app as a WAR file in Jetty. My back end is java based. I am using only jquery in the client side as of now.

我现在有两个绊脚石。虽然有些信息......我正在将我的应用程序部署为 Jetty 中的 WAR 文件。我的后端是基于 Java 的。我现在只在客户端使用 jquery。

My main stumbling block is how to handle login, logout and session management. With an rest API and using ajax, I have login working, including it setting a cookie. My concern however is with a single page app, there is just the one index page, and if the user closes the browser, then reopens it to the index page while the cookie/session is still good, the user should be logged in, not see the outside (not logged in) page. I am unsure how to handle this, whether it be a jsp page, index.html with some templating library, etc. With JSP I can insert some scriplet code (against my better judgment). In the old days I'd include a header that would check for request.getSession().getAttribute("user") and if it was there..the user was logged in and using scriplet if() code I'd display a logged in header, instead of the non-logged in header. But I am in the belief there has got to be a better way to do this with todays client side JS frameworks.

我的主要绊脚石是如何处理登录、注销和会话管理。使用 rest API 并使用 ajax，我可以登录工作，包括设置 cookie。然而，我担心的是单页应用程序，只有一个索引页，如果用户关闭浏览器，然后在 cookie/会话仍然良好的情况下将其重新打开到索引页，用户应该登录，而不是查看外部（未登录）页面。我不确定如何处理这个问题，无论它是一个 jsp 页面，还是带有一些模板库的 index.html 等等。使用 JSP 我可以插入一些脚本代码（与我更好的判断相反）。在过去，我会包含一个标头来检查 request.getSession().getAttribute("user") ，如果它在那里......用户已登录并使用脚本 if() 代码我会显示一个登录标题，而不是未登录的标题。但我相信必须有更好的方法来使用今天的客户端 JS 框架来做到这一点。

The other stumbling block is the navigation and dynamic aspects. For example, when I was messing around with angular js, it was easy enough to use Welcome {{name}} and within the scope replace name with a json response value for the logged in user. In my current situation, I am not exactly sure how to best go about displaying dynamic bits like this with pure jquery other than using some sort of $("#elem-id").innerHtml="..." code within the response success method of an ajax call. As well, I am not quite sure how to handle navigation to different pages. My logged in site will have some drop down menus or links that will replace the content area with different varying amounts of content.

另一个绊脚石是导航和动态方面。例如，当我在使用 angular js 时，很容易使用 Welcome {{name}} 并在范围内将 name 替换为登录用户的 json 响应值。在我目前的情况下，除了在响应中使用某种 $("#elem-id").innerHtml="..." 代码之外，我不确定如何最好地使用纯 jquery 显示这样的动态位ajax调用的成功方法。同样，我不太确定如何处理不同页面的导航。我登录的站点将有一些下拉菜单或链接，它们将用不同数量的内容替换内容区域。

So first, what are some ways in a SPA to handle user sessions, in the case of a page reload, or close/crash browser restart.. to ensure the user is still logged in and direct them to the right page? Second, what sort of templating and routing/navigation options exist that don't require me to put a huge ton of code in my one index.jsp page?

那么首先，在页面重新加载或关闭/崩溃浏览器重新启动的情况下，SPA 中有哪些处理用户会话的方法......以确保用户仍然登录并将他们定向到正确的页面？其次，什么样的模板和路由/导航选项不需要我在一个 index.jsp 页面中放置大量代码？

Thank you.

谢谢你。

回答by ncabral

If you're having a REST API as the back end, then you must have implemented oAuth as an authentication mechanism. That is, when your user logs in, using a username and a password, you exchange that data with an authentication token. This authentication token is sent your server with each and every API call and your backend validates this token before servicing the request. Clear so far?

如果您将 REST API 作为后端，那么您必须将 oAuth 实现为身份验证机制。也就是说，当您的用户使用用户名和密码登录时，您将使用身份验证令牌交换该数据。此身份验证令牌随每个 API 调用发送到您的服务器，您的后端在为请求提供服务之前验证此令牌。到此为止吗？

What you could do is, when you obtain the access token, you can also obtain the access token expiration time from the server and store that data in your client side app. In localStorage maybe? And when your user closes the browser and reopens again, you can first check whether such access token is available (and not expired) before asking the user to log in. This should solve your first problem.

您可以做的是，当您获得访问令牌时，您还可以从服务器获取访问令牌到期时间并将该数据存储在您的客户端应用程序中。在 localStorage 中？当您的用户关闭浏览器并再次重新打开时，您可以在要求用户登录之前先检查此类访问令牌是否可用（并且未过期）。这应该可以解决您的第一个问题。

Secondly, if you're looking for a lightweight routing option, I recommend director.

其次，如果您正在寻找轻量级路由选项，我推荐director。

回答by arisalexis

I am building a similar application. OAuth is not mandatory. You can have normal sessions etc by hitting the jersey login endpoint and setting a session and a cookie "keepme" with the session if user wants to be persistently logged in. You can then have a jersey AuthFilter for example check if either there is a cookie with a valid session or an active session and keep the user logged in.

我正在构建一个类似的应用程序。OAuth 不是强制性的。如果用户想要持久登录，您可以通过点击 jersey 登录端点并设置会话和 cookie“keepme”来进行正常会话等。然后您可以使用 jersey AuthFilter 例如检查是否有 cookie使用有效会话或活动会话并保持用户登录。

Your frontend application should have no say over this, just communicate with the server and if it doesn't get unauthorized access (from the AuthFilter) then continues otherwise it displays the login page.

您的前端应用程序不应该对此没有发言权，只需与服务器通信，如果它没有获得未经授权的访问（来自 AuthFilter），则继续，否则它会显示登录页面。