在另一个函数已在本地存储中设置项目之后调用一个函数

2024-05-17 • 问答

我目前正在尝试根据我的本地存储内容执行两项操作。

我的项目使用ReactJS，但是由于我不知道如何全局设置状态或通过父子组件来回传播数据，因此我决定使用本地存储。

我正在尝试为登录的用户分配角色和权限。为此，我有两个单独的提取函数，只要我的用户通过身份联盟代理进行身份验证，便会执行该函数。

这是我在单独的 Userauthorization.js 文件中的第一个功能：

function Userauthorisation() {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role",response[eachUser].role);
          }
        }
      });
  } else {
    console.log("We don't have the user ID item");
  }
}

export default Userauthorisation;

这是应该在 Userauthorization.js 之后运行的第二个功能：

function FetchUserPermissions() {
  const userRole = localStorage.getItem("role");
  console.log(userRole);
  if (userRole !== null) {
    fetch("https://api.myjsons.com/binz/xxzsz")
      .then(response => response.json())
      .then(response => {
        for (let permission = 0; permission < response.length; permission++) {
          if (permission === response[permission]) {
            console.log(response[permission],"<<<<<<< This is the user Role");
            return response[permission];
          }
        }
      });
  } else {
    console.log("not loggedin === no user permissions.");
  }
}

export default FetchUserPermissions;

我遇到的问题是，由于我只是按函数名称调用它们，因此第二个 FetchUserPermissions 打印出 null 而不是 userRole 。

我认为这是因为我试图在设置本地存储之前抢占这个角色，但是当我更改为 async await 的功能时，我得到了一个结果cannot read property .length of undefined

如何调用第一个函数之后的第二个函数，并从本地存储中获取我的 role 元素？

对这个愚蠢的问题表示歉意。

您说对了。发生这种情况是因为当FetchUserPermissions调用UserAuthorisation时，无法及时将角色设置到localStorage中。一个简单的解决方案是从UserAuthorisation返回Promise，然后在then（）中调用FetchUserPermissions。

174.24.100.52:8438/spring-customer:v1

用法。

function UserAuthorisation() {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    return fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role",response[eachUser].role);
          }
        }
      });
  } else {
    console.log("We don't have the user ID item");
  }

  return Promise.resolve();
}

export default UserAuthorisation;

给你的小例子。

UserAuthorisation().then(() => {
  FetchUserPermissions();
});

在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise或https://javascript.info/promise-basics处了解有关承诺的更多信息。

fetch("https://api.myjsons.com/binz/xxzsz")
  .then(response => response.json())
//here,response.json() will send object in next promises chain.
  .then(response => {
//response.length not working on object.
log your response here & check your condition 
for (let permission = 0; permission < response.length; permission++)

您可以创建Promise，然后调用FetchUserPermissions

function UserAuthorisation() {
return new Promise(function(resolve,reject) {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role",response[eachUser].role);
            resolve(response[eachUser].role)
          }
        }
      });
  } else {
    reject("We don't have the user ID item")
    console.log("We don't have the user ID item");
  }
});

}

export default UserAuthorisation;


UserAuthorisation.then(FetchUserPermissions(role));

在另一个函数已在本地存储中设置项目之后调用一个函数

HU9694 回答：在另一个函数已在本地存储中设置项目之后调用一个函数

大家都在问