React 基于角色的路由访问

Question

我在 React 17 中有一个应用程序，路由器版本是 6，我已经知道基本的身份验证和授权，但我正在努力解决的问题是，某些路径允许用户使用，而其他路径是不是。这是我的代码结构

import React from 'react'

function App() {
    let userRoles = [
        "products/list",
        "products/add",
        "products/update",
        "products/delete",
        "action/list",
        "action/add",
        "action/edit"
    ]
    return (
        <Route>
            < Route path="/action" element={< Action />} />
            < Route path="/edit-action" element={< EditActions />} />
            < Route path="/add-actions" element={< AddActions />} />
            
            < Route path="/products" element={< Products />} />
            < Route path="/edit-product" element={< AddProducts />} />
            < Route path="/add-products" element={< AddProducts />} />

            {/* Not allowed to the user */}
            < Route path="/broker-firm" element={< BrokerFirm />} />
            < Route path="/add-broker-firm" element={< AddBrokerFirm />} />
            < Route path="/edit-broker-firm" element={< EditBrokerFirm />} />
        </Route>
    )
}

export default App

如果用户试图导航到任何不允许的路线，它应该停留在同一页面上，并显示一条提示通知，告知您不允许进入该路线。

我可以用 toast.error("Some error message") 显示 toast 消息但我不会像这样让它工作。

我已经尝试过将路由包装在这样的条件中

{userRoles.includes("product/list") && < Route path="/products" element={< Products />} />}

但这种方法的问题是我无法向用户显示错误消息，因为 React Router simple 不知道关于该路由的任何信息，它根本不会生成该路由

Answer 1

还有另一种方法可以做你想做的事。您可以在 individual components.

中检查它，而不是在 app.js 中检查它

您可以将数据传递给 component，在那里您可以检查是否允许 user 访问它。

if(!userRoles.includes("product/list")) {
 navigate('/')
}

Answer 2

您只需用身份验证组件包装您希望限制的路由。
他们的文档有一个很好的例子，docs explanation, stackblitz example

React 基于角色的路由访问

React roles based route accesss

javascript

reactjs

react-router

react-router-dom