Reactjs 如何在render（）之前获取角色

我想做以下工作：

• 向服务器发送请求，验证JSON web令牌并获取用户详细信息（姓名、电子邮件和角色）
• 然后页面显示特定的菜单项（如果用户是admin，则显示Main、admin和Logout项；如果不是-Main和Logout）

---

我考虑从localStorage获取令牌，然后对其进行解码并从中获取角色。但是，如果我更改了数据库中的角色（例如从管理员更改为用户），我应该怎么做？客户端上的解码令牌将包含“admin”角色。因此，该用户将能够看到管理页面。

您可以在存储中使用名为

isFetchingUserDetails

的变量，并在对服务器进行异步调用以获取详细信息时将其设置为true

在

isFetchingUserDetails

设置为true之前，可以在render（）中使用if语句返回微调器或其他组件，向用户显示页面正在加载

从服务器获得响应后，

isFetchingUserDetails

将设置为false，并执行其余的render（）

无店铺

import React，{Component}来自“React”；
从“react dom”导入react dom；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={isFetchingUserDetails:true}；
}
componentDidMount（）{
取回(`https://api.makethecall.com/users/1`)
.then（res=>res.json（））
.then（（）=>this.setState（{isFetchingUserDetails:false}））；
}
render（）{
if（this.state.isFetchingUserDetails）{
返回
}
返回(
);
}
}

欢迎来到StackOverFlow friend。你能回答一下你在哪个平台或框架下工作吗？E.x.React.js、Python、Java？@marcode_ely Tag说的是React.js..你也需要在后端代码中处理授权，这样你就可以克服你在文章中解释的问题。不清楚你是在问初始显示的机制，还是在问将本地存储的令牌状态同步到服务器状态的问题（在此期间可能发生了变化）你可能想考虑编辑来重新关注这个问题。如果问题是关于状态的同步，你可能需要更多的研究。孤立的问题可能已经有答案了。总之，我想在每次他进入一个特定的页面时得到一个用户的角色，但是我不能这样做，因为页面在 Fuffh（）之前呈现。获取响应您是指本地存储吗？我指的是像redux这样的全局存储。但如果您不使用，可以使用状态变量，如我在回答中所示。

import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
  constructor() {
    super();
    this.state = { isFetchingUserDetails: true };
  }
  componentDidMount() {
    fetch(`https://api.makethecall.com/users/1`)
      .then(res => res.json())
      .then(() => this.setState({ isFetchingUserDetails: false }));
  }
  render() {
    if (this.state.isFetchingUserDetails) {
        return <Spinner />
    }
    return (
      <Home />
    );
  }
}