在 Dart Webapp 中保护路由

Securing Routes In Dart Webapp

我正在构建一个 Dart/Aqueduct 网络应用程序,我需要在其中限制对某些路由的访问。我在发出 HTTP 请求时使用 Aqueducts Authorizers,但我有点担心在 dart 应用程序本身内控制用户访问。

当路由到 webapp 中的不同页面时,我使用 Dart 路由,即:

 const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)

这允许我在新 URL 中使用不同的模板和组件,但是没有发出 HTTP 请求。有没有办法在用户进入应用程序后有效地实现用户范围?

我正在考虑在路由组件初始化时检查访问令牌,如果用户未通过身份验证则不显示信息,但用户是否仍然可以访问该页面内容,因为 dart webapps 进来了预编译JS包?

考虑创建两个应用程序 - 一个基本上只包含 login/signup 页面,另一个具有您的受保护功能。

您需要在服务器上编写代码以仅让经过身份验证的用户看到受保护的应用程序。否则,您可能想要抛出 403,或将访客重定向到登录页面。

希望对您有所帮助。

如果我误解了您的问题或者您已经了解其中的大部分内容,请原谅我,但听起来您是在询问应用程序显示的数据与应用程序本身之间的区别。或者更一般地说,单页应用程序和服务器端呈现页面之间的区别。

在服务器端呈现应用程序中,每个导航都会从服务器(或缓存)加载一个新的 URL。服务器使用请求中的授权信息获取适当的数据,将其插入模板化的 HTML 页面,然后 returns 该页面。根据客户的说法,页面显示的数据和页面本身是一个实体。如果无法获取数据,则返回一个不同的页面,表明用户没有访问权限。

在单页应用程序中,您可以导航到的每个可能 'page' 都被下载一次,而且它们都没有任何实际数据。相反,这些页面是数据的容器。这些页面的行为向服务器发出 API 请求以显示数据。

应用程序本身不受保护 - 任何人都可以导航到它或它的任何页面。但是,数据受到保护。如果用户无权访问 API 调用请求的数据,则会返回 401 状态代码和 JSON 错误正文。

因此,必须区分客户端路由和服务器端路由。您已经注意到客户端路由实际上并不发出 HTTP 请求 - 这是故意的。

如果您正在为应用程序和来自同一应用程序的 API 提供服务,最好在所有 API 路由前加上 /api 之类的前缀。例如客户端路由为/heroes,服务端路由为/api/heroes。这也允许移动应用程序(或任何其他非浏览器应用程序)使用您的 API;他们不会想要 HTML 因为他们有自己的渲染行为。

正如 Günter 所说,如果有一个页面在无法访问 API 数据的情况下毫无用处,请将其返回到登录页面。有两种情况您无法访问 API 数据:您根本没有访问令牌,并且您的访问令牌已过期。

当您导航到 /heroes 客户端路由时发出 API 请求。如果您没有访问令牌,请将它们放到登录页面。如果请求产生 401,将它们返回到登录页面。如果返回 200,则正常运行。

客户端路由妨碍的一个地方是尝试在浏览器中输入客户端路由 URL(而不是以编程方式导航到它)。有不同的策略来回避这个问题,这里是一个:https://github.com/stablekernel/aqueduct/issues/274.