reactjs - 带有路径变量的 React Admin 资源名称

Question

是否可以在 React Admin 中使用路径变量指定资源名称？

问题

当用户进行身份验证时，如果是管理员，应该会看到电子邮件帐户列表。单击它重定向到路径的电子邮件experts/${email}/requests。

要映射此路径，我需要为每封电子邮件定义一个新资源。这个问题是我必须在认证之前做。

我想要的是资源名称的路径变量。例如experts/:email/requests。

当前实现的示例

function App() {
  const [emails, setEmails] = useState<string[]>([]);
  useEffect(() => {
    (async () => {
      const experts = await firebase.firestore().collection("experts").get();
      const docIds: string[] = experts.docs.map((doc) => doc.id);
      setEmails(docIds);
    })();
  }, []);

    return (
      <Admin
        authProvider={authProvider}
        dataProvider={dataProvider}
      >
        {(props) => {
          if (props.admin) {
            return [
              emails.map((email) => {
                return (
                  <Resource
                    key={email}
                    options={{ label: `${email}` }}
                    name={`experts/${email}/requests`}
                    list={RequestList}
                    edit={RequestEdit}
                  />
                );
              }),
              <Resource name={`experts`} list={ExpertList} />,
            ];
          } else {
            return [
              <Resource
                options={{ label: `${props.email}` }}
                name={`experts/${props.email}/requests`}
                list={RequestList}
                edit={RequestEdit}
              />,
            ];
          }
        }}
      </Admin>
    );
  }

Answer 1

我决定覆盖 Firebase authProvider 的登录，而不是路径变量（React Admin 不可能），以便在用户登录后立即获取数据。

需要超时，因为可能会在第一次渲染后设置 localStorage。

let authProvider = FirebaseAuthProvider(firebaseConfig, options);
const login = authProvider.login;
authProvider = {
  ...authProvider,
  login: async (params) => {
    try {
      const user = await login(params);
      const experts = await firebase.firestore().collection("experts").get();
      const docIds: string[] = experts.docs.map((doc) => doc.id);
      localStorage.setItem("emails", JSON.stringify(docIds));
      await timeout(300);
      return user;
    } catch (error) {
      console.error("error", error);
    }
  },
};