Javascript 在本地存储器中设置项后调用一个函数

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

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

我正在尝试为登录用户分配角色和权限。为了做到这一点，我有两个单独的fetch函数，每当我的用户通过身份联合代理进行身份验证时，我都会执行这两个函数

这是我在一个单独的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;

功能用户授权（）{
const userid=localStorage.getItem（“userid”）；//获取IFB设置的令牌。
if（userid！==null）{
取回（“https://api.myjsons.com/binz/examplebin")
.then（response=>response.json（））
。然后（响应=>{
for（让eachUser=0；eachUser

下面是第二个函数，它应该在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（）{
const userRole=localStorage.getItem（“角色”）；
log（userRole）；
if（userRole！==null）{
取回（“https://api.myjsons.com/binz/xxzsz")
.then（response=>response.json（））
。然后（响应=>{
for（让权限=0；权限console.log（response[permission]，“您说得对。这是因为FetchUserPermissions调用UserAuthorization时无法及时将角色设置到本地存储中。简单的解决方案是UserAuthorization返回承诺，然后（）调用FetchUserPermissions

给你举个小例子


function first（）{
返回新承诺（（解决）=>{
设置超时（（）=>{
console.log（'1'）；
解决（）；
}, 1000);
});
}
函数第二（）{
console.log（'2'）；
}
第二个（）；//2
首先（）。然后（第二）；/1->2
您可以创建承诺，然后调用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));

功能用户授权（）{
返回新承诺（功能（解决、拒绝）{
const userid=localStorage.getItem（“userid”）；//获取IFB设置的令牌。
if（userid！==null）{
取回（“https://api.myjsons.com/binz/examplebin")
.then（response=>response.json（））
。然后（响应=>{
for（让eachUser=0；eachUser
我只是不停地得到“未捕获”（承诺中）TypeError:由于某些原因，无法读取undefined`的属性'length'。您可以添加一个async示例，我可以在其中看到错误吗？我想问题可能出在我的json上，您可以尝试一下这个链接吗？因为我看到您的json是有效的。您可以使用来检查它。使用json笔。我认为您应该检查您的响应中包含的内容。任何使用可能抛出TypeError的内容不是最佳做法。例如，如果您的响应为null，您将尝试获取。此处的null长度TypeError将被抛出。在现实世界中，人们使用类似u.get（来自lodash库）或u.forEach（例如）的内容。作为响应，我没有看到名称id为的属性。
UserAuthorisation().then(() => {
  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));