如何在react-admin的AuthProvider中配置getPermissions方法？

如何解决如何在react-admin的AuthProvider中配置getPermissions方法？

我尝试创建自定义钩子，以调用DataProvider getone()方法，以基于登录后从authProvider中获得的用户名获取权限，但是从函数体中调用钩子的持续要求会抛出异常错误，因为我从方法中调用它。

权限来自何处？ “ ra-core”如何称呼此getPermissions()？为什么在getPermissions（）中有一个称为.then()不是函数的错误？

在AuthProvider的这方面需要有更好的文档，以帮助甚至经验丰富的react-admin人员。只是说。

挂钩获取权限：

const useFetchPermissions = ({ emailId }) => {
  const dataProvider = useDataProvider();
  const [loading,setLoading] = useState(true);
  const [error,setError] = useState();
  console.log("fetching permissions");

  const [permissions,setPermissions] = useState();

  useEffect(() => {
    dataProvider
      .getone("users/permissions",{ id: emailId })
      .then(({ data }) => {
        setPermissions(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  },[]);

  if (loading) return <Loading />;
  if (error) return <Error />;
  if (!permissions) return null;

  return permissions;
};

AuthPRovider登录方法：

login: () => {
    /* ... */
    console.log("Logging in..");
    //localStorage.setItem("permissions","CREATE_ITEM");
    return tfsAuthProvider.login();

AuthProvider getPermissions方法：

getPermissions: () => {
    const role = localStorage.getItem("permissions");
    console.log(role);
    //useFetchPermissions(authProvider.getAccount().userName); throw error
    return role === null ? Promise.resolve() : role;
  },

App.js dataProvider（url，useHttpClient）调用此：

const useHttpClient = (url,options = {}) => {
  if (!options.headers) {
    options.headers = new Headers({ Accept: "application/json" });
  }
  // add your own headers here
  //options.headers.set("Access-Control-Allow-Origin","true");
  //const token = localStorage.getItem("token");
  //const userName = authProvider.getAccount().userName;
  //const [permissions,setPermissions] = useState();
  //const permissions = useFetchPermissions(userName);  throws error

  //localStorage.setItem("permissions",permissions);
  options.headers.set(
    "Authorization",`Bearer ${authProvider.getAccount().userName}`
  );
  return fetchUtils.fetchJson(url,options);
};

解决方法

如果仅基于emailId且每次用户会话都没有更改的原因，为什么每次都要为用户的权限调用API？

我将使用login的{{1}}方法进行呼叫，您有两个选择：

取决于API和后端，您可以（如果有此选项）在authProvider上返回复杂json对象或jwt内部的权限以及其他用户信息。
基于login，并在成功的登录响应后，进行连续调用（如emailId中的上述调用），然后再次将其存储在某个位置，以便以后可以在{{ 1}}。

我还没有测试这段代码，所以它可能会有一些错误，但是只是一个思路，您可以不用钩子就能建立登录管道。

useFetchPermissions

由于@KiaKaha的回答，我能够实现对我有用的东西，该方法可以解决react-hooks的异常。

编辑：这是一种改进的解决方案

login: () => {
    /* ... */
    console.log("Logging in..");

    console.log(tfsAuthProvider.authenticationState);

   
    return tfsAuthProvider.login().then(async () => {
      const result = await fetch(
        process.env.REACT_APP_BASE_URL +
          "/users/permissions/" +
          tfsAuthProvider.getAccount().userName
      );
      
      const body = await result.json();
      console.log(body);
      localStorage.setItem("permissions",body);
      return Promise.resolve();
    });
   
  },

dataProvider.getOne()方法是一个反应挂钩，因此我无法调用它。如此使用fetch()。使用环境变量来获取dataProvider使用的URL。（这仍然适用）。

response无法直接转换为字符串，因此我使用了response.body.getReader()和UTF8解码器来解码read()的结果。

login: () => {

 console.log("Logging in..");

 console.log(tfsAuthProvider.authenticationState);

 const utf8Decoder = new TextDecoder("utf-8");

 return tfsAuthProvider
   .login()
   .then(() =>
     fetch(
       new Request(
         process.env.REACT_APP_BASE_URL +
           "/users/permissions/" +
           tfsAuthProvider.getAccount().userName,{
           method: "GET",headers: new Headers({ "Content-Type": "application/json" }),}
       )
     )
   )
   .then((response) => {
     if (response.status < 200 || response.status >= 300) {
       throw new Error(response.statusText);
     }
     return response.body.getReader();
   })
   .then((reader) => reader.read())
   .then(({ done,value }) => {
     // if (done) {
     //   controller.close();
     //   return;
     // }

     const permissions = utf8Decoder.decode(value);

     console.log(permissions);
     localStorage.setItem("permissions",permissions);
     return Promise.resolve();
   });
},

希望这可以帮助任何人通过这个兔子洞。

有关可读流对象的更多信息-https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

有关登录实现的更多信息-https://marmelab.com/react-admin/Authorization.html