在 React 中构建安全的用户角色路由
Building a secure user roles route in React
我正在尝试考虑不同的方法来解决这个问题。一种方法是...
假设我们得到一个令牌，该令牌具有对用户登录时返回的角色的声明。
对于这个虚构的应用程序，我们有 3 个角色，super、admin、guest。
令牌 returns 角色 属性 中的字符串值，例如角色：“admin”
在应用程序中，我们构建了两个函数，一个 routeBuilder 和一个 navItemBuilder，以构建我们在角色字符串中传递的这些对象，例如“admin”
然后应用程序根据用户的角色呈现可用的正确路线和菜单项。例如，“访客”只能访问关于页面和新闻。但是超级用户还可以访问另一个名为配置文件或类似内容的导航项...
但是，如果我随后使用 React 开发工具并编辑令牌角色声明，我可以使应用重新呈现新的导航路线。
我可以更改令牌对象角色字符串，然后当它更新 routeBuilder 和 navItemBuilder 时，将根据我想要的任何字符串构建新路由。
如何在我的应用中构建角色并避免此安全问题？
应用程序本身不应内置任何敏感内容。
在服务器级别应用安全性。
例如，用户是否可以显示 Admin 路由的 UI 并不重要。
当他们的浏览器从服务器请求填充它所需的数据时，服务器应该执行 AuthZ 和 return 错误而不是（例如）可以管理的用户列表。
然后您的 client-side 代码可以处理错误，因此如果用户意外结束（例如，如果他们是有效用户但他们的会话已过期），他们可以被转移到登录屏幕或给有用的错误消息。
我正在尝试考虑不同的方法来解决这个问题。一种方法是... 假设我们得到一个令牌，该令牌具有对用户登录时返回的角色的声明。 对于这个虚构的应用程序，我们有 3 个角色，super、admin、guest。
令牌 returns 角色 属性 中的字符串值，例如角色：“admin”
在应用程序中，我们构建了两个函数，一个 routeBuilder 和一个 navItemBuilder，以构建我们在角色字符串中传递的这些对象，例如“admin”
然后应用程序根据用户的角色呈现可用的正确路线和菜单项。例如，“访客”只能访问关于页面和新闻。但是超级用户还可以访问另一个名为配置文件或类似内容的导航项...
但是，如果我随后使用 React 开发工具并编辑令牌角色声明，我可以使应用重新呈现新的导航路线。 我可以更改令牌对象角色字符串，然后当它更新 routeBuilder 和 navItemBuilder 时，将根据我想要的任何字符串构建新路由。
如何在我的应用中构建角色并避免此安全问题？
应用程序本身不应内置任何敏感内容。
在服务器级别应用安全性。
例如，用户是否可以显示 Admin 路由的 UI 并不重要。
当他们的浏览器从服务器请求填充它所需的数据时，服务器应该执行 AuthZ 和 return 错误而不是（例如）可以管理的用户列表。
然后您的 client-side 代码可以处理错误，因此如果用户意外结束（例如，如果他们是有效用户但他们的会话已过期），他们可以被转移到登录屏幕或给有用的错误消息。