Question

我要执行以下操作：

向服务器发送请求，验证JSON网络令牌并获取用户详细信息（名称，电子邮件和角色）；
然后显示该页面，其中包含特定的菜单项（如果用户是admin，则显示他的Main，Admin和Logout；如果不是，则显示Main和Logout）。

我考虑过只从localStorage获取令牌，然后对其进行解码并从中发挥作用。但是，如果我更改数据库中的角色（例如，从管理员更改为用户），该怎么办？客户端上的已解码令牌将包含“管理员”角色。这样该用户将可以看到管理页面。

Answer 1

您可以在商店中使用名为isFetchingUserDetails的变量，并在对服务器进行异步调用以获取详细信息时将其设置为true。

直到isFetchingUserDetails设置为true为止，您都可以在render（）中使用if语句返回微调器或其他向用户显示页面正在加载的组件。

从服务器获得响应后，isFetchingUserDetails将被设置为false，其余的render（）将被执行。

无商店

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 />
    );
  }
}

在render（）之前如何获得角色

1 个答案: