如何有独立的管理存储，不是由非管理员用户加载

Question

我想创建一个只有管理员用户才能加载的mobx商店。它只会被注入到/admin路径上的任何东西中。我已经研究过嵌套提供者的使用，但运气不太好。

理想情况下，我希望它链接到路由，所以如果用户转到domain.com/admin，那么它就会被加载。

我可以写一些糟糕的代码，简单地检查用户是否是管理员，但我希望有一个更优雅的模式可以遵循。

编辑

这是我的临时解决方案，让我知道是否有更好的方法

AdminRoutes

export const AdminRoutes = () => {

const adminStores = createAdminStores()
return (
<Switch>
<Provider {...adminStores}>
<AuthedRoute path="/admin" exact component={Admin} />
</Provider>
</Switch>
)
};

应用程序

export const App = hot(({ history }: any) => (
<Provider {...rootStores}/>
<Router history={history}>
<Switch>
<UnauthedRoute path="/login" exact component={Login}></UnauthedRoute>
<Route path="/admin" exact component={AdminRoutes} />
<Route path="/error" component={ErrorComponent} />
<Route path="/abc" component={Test} />
<Route path="/:path" component={Issue} />
<Route path="/" component={Home} />
</Switch>
</Router>
</Provider>
));

只有当用户运行AdminRoutes路由时，我才会创建管理存储。唯一的问题是，当用户更改URL时，存储会重新加载，而我的所有其他存储都会发生这种情况。

Answer 1

您可以改进的一件事是将React.lazy与整个Admin组件一起使用。

// import it like that
const AdminRoutes = React.lazy(() => import('./path-to-admin-routes'))
...
// and use like that
<Route
path="/admin"
render={() => (
<Suspense fallback={'Loading'}>
<AdminRoutes />
</Suspense>
)}
/>

这样，普通的非管理员用户甚至不会加载管理内容，你的最终捆绑包会更小。

更多信息：https://reactjs.org/docs/code-splitting.html#reactlazy

或者您也可以将您的AdminStore动态地注入到RootStore中。我为它做了榜样，希望它有意义https://codesandbox.io/s/httpsstackoverflowcomquestions62759240-ew8hf?file=/src/AdminComponent.js基本上，您在第一次加载管理组件时创建AdminStore，然后通过将其保存在RootStore中来使用新创建的实例